.NET MAUI's Navigation for Beginners - Push, Pop, & Pass Objects
.NET MAUI is packed full of powerful features including single project, cross-platform APIs, and of course a fantastic navigation system! Using Shell and the URI based navigation system you can easily navigate to a page, pop to page, pop and navigate to a new page, and of course pass arguments around. You can pass simple properties around through the URL, or you can pass full objects with a brand new API that is exclusive to .NET MAUI! Today, I break it all down from start to finish in this .NET MAUI Navigation Crash Course using Visual Studio 2022.
Links:
Source Code: github.com/jamesmontemagno/Ma...
Documentation: docs.microsoft.com/dotnet/mau...
Chapters:
00:00 - Intro
00:35 - Types of navigation in .NET MAUI
02:05 - App code walkthrough
03:08 - Registering routes for pages
05:00 - Simple navigation & back navigation
08:30 - Back and Up Navigation
11:30 - Passing simple parameters when navigating
16:15 - Passing Complex Objects & Data
19:00 - Wrap-up
Join this channel to get access to perks:
/ @jamesmontemagno
👕 Buy some swag! - jamesmontemagno.myspreadshop....
☕️ Buy me a coffee - www.buymeacoffee.com/jamesmon...
Follow:
👨💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
My Setup:
📷 Canon M50 Mark II - amzn.to/3P8R7lp
💡 Nanoleaf Elements Lights - amzn.to/3umwJVW
🎙 Blue Spark Microphone - amzn.to/3qgtYkq
🎙 Blue Pop Filter - amzn.to/3jEWM3r
🤳 Rode Microphone Arm - amzn.to/2Z68AlE
🎧 Sony MDR7306 Headphones - amzn.to/372jxta
📲 Stream Deck - amzn.to/373Uk1n
📹 Elgato Cam Link - amzn.to/3a9eGbh
📷 GoPro Hero - amzn.to/374lm90
🖱 MX Master 2S Mouse - amzn.to/3d7J2gj
⌨️ Tecware Phantom Keyboard - amzn.to/3aUP4y9
#dotnetmaui #dotnet #navigation
Thanks a lot for your big contribution to the community ! Big up from Africa-Mali
Right on time for me, as I was trying to figure out how to do that. Thanks James!
Inspiring! Very well structured and explained.
This was really useful. Thanks for taking the time to make it.
Great explanation, thanks for your efforts.
Love these videos on MAUI
Thanks for this tutorial James, it's nice and really helpful. Thank you!
Passing object is an amazing feature. Thank you guy
Thanks James!
Its amazing. Loved it,
great video and amazing new feature
incredibly, you makes best tutorials videos in the world
Cheers! very very helpful
Loved the video! When you showed the back and up and it did the correct transition animations I was sold! I would love to see more videos with more navigation scenarios. Maybe it is in the documentation but there are two navigation scenarios or transitions that I wonder if shell supports: 1. Showing a modal page that has its own navigation stack, ie pages navigated to from it, and then be able to pop the entire modal nav stack with one smooth transition (this is something that's been available on iOS for ages but I do not think it is supported on Android so when I've used various MVVM frameworks with VM navigation it has not been supported). 2. How to do a transition from page A to page B where a visual element from page A is part of page B, for example a small image growing into a slightly bigger one, I think it's called "shared element transition".
Amazing video! Thank you!
Super , thank you very much James.... I am learning a lot from your channel
Thank you very much for the video. I have reviewed a lot and I am healthy that they help me develop.
Thanks James for explaining how to pass objects!
You bet!
Brilliant tutorial. I'm always learning from you. The reason being you are interesting to listen to and very easy to learn from your explanations.
One more thing, your coding practices are the most standard to follow. I always follow the principles and style you use to code because they are structured and rigid
Great video man, thx =)
Glad you liked it!
awesome stuff, thank you!
Glad you liked it!
You are great!
Thanks so much f
Thanks James. Can you please make Video about how to navigate between Pages with Hamburger-Menu and Shell-Flyout?
Awesome
thank you!
You're welcome!
Thanks for the great video. I started working .Net Maui with Shell and MVVM. I was able to use Shell navigation for normal page but when I tried to use PopUp page using Community Toolkit , I was able to use ShowPopup method using MVVM but not able to use Close method to dismiss the popup. Any help would be appreciated.
Hi James. Is it possible to have different objects in a CollectionView. I know you can have different controlls in a CollectionView but what about objects(models)? I hope you understand what I mean 😉
Hi James, Is there any examples available for push notifications with Maui chat app ?
I'm in love with MAUI. Sadly, half the population in my country uses Win 7, so... I'm stuck with WPF. Which isn't bad, but foces me to deal with Xamarin in different projects for those deployments that require Desktop and Mobile. Great video, James!! Always good stuff 😁
What Win7? It's not supported anymore
@@Luca_040 I know, but most of the people here still use it either because of Drivers or Hardware constraints. Our currency is weak and tech is heavily taxed.
Great Video. What if I wanted to dynamically set a the name property of Monkey class in the view model on the dictionary object. Thanks !!!
Hi James! Great content as always) How to implement "Login flow" with the shell when we need to specify the first page dynamically?
I covered this here: kzhead.info/sun/rNCbl7uAeZGdgIE/bejne.html
You have great Videos. thanks a lot. I'm searching tutorial/Demo of how to do MAUI Reminder manager like app. Meaning I need to popup reminder to the user using MAUI for IOS & Android. Do you have such or you know any resource that I can refer?
Do you have a video of making the app in the thumbnail? I would like to know more about working with and styling CollectionViews.
btw, the parameters can be removed from the query if you using IQueryAttributable to do some actions above the parameters
I always look forward to your videos. I really hope Maui development would be isolated from visual studio tooling
Thanks! Glad you are enjoying them. In general it is isolated as you can install everything via the command line and everything is built and deployed via command line as well. Visual Studio just has the most tooling for .NET MAUI packed in and simplifies the install. You can also use something like Comet with VS Code too github.com/dotnet/comet
@@DM-98 WitchCraft >_
When you await a GoToAsync should it wait for the page you navigated to navigate back before continuing execution? In the debugger it passes straight thru the call.
I can already see me using this instead of WPF for all future development because of the mere navigation convenience
Takk!
Hi Jame! Awesome video. So if I want to pass a code and use that code to query data before the page display I have to do it in the Onnavigatedto method?
The page has just been created and then is navigated to and all of the properties are set inbetween that so there shouldn't be a real need to do it before hand. Else, you could register something with the dependency service and inject it in.
James, We need pop-ups
How to create a custom popup that applies in all the platforms in a easy way with MAUI
There are a bunch of display pop ups, but also they are in the .NET MAUI Community toolkit! Check it out
Is it possible navigate between pages inside tabs and page in different tab ang you can back on previous page which belongs to other tab?
can you make a video on a setup for building an apk app and have it working on your phone? attempted it after multiple videos and documentation but I keep getting incomplete package/lack of certificate errors.
Thanks for the great video James. Nice and clean explanation. I would like to raise a few questions: 1- How could one go to the root view by clearing the whole navigation stack? (".." navigates to one level up, what if I am in the 20th level deep?) 2- How is the presentation style used? (For instance, In iOS, I need some views to show up modally when a particular condition is met, otherwise, I want it to be an ordinary segue) 2nd is kinda out of topic. Could you prepare a video for that as well? Great videos, keep it going :)
You can navigate to root with "/". And if you want to display an element on condition, you can initially set them to invisible, check the condition on code behind or ViewModel and then set the visibility according to the result
Is there a way to push a tabbed page onto the page stack? e.g. a tabbed details page?
How can I get the notification that the user took a screenshot? Also, how can I get the browser URL in the mobile app when the user is using their favorite browser?
What if you have several pages and you just want to share a ViewModel between all of them? I tried doing this but I get very bad errors. Is a ViewModel instance tightly coupled to only one page? Am I getting the errors because dependency injection will only set the linkage to "the first page that grabs the ViewModel", or some other restriction that I am not yet aware of?
Hey! Need some help . I have main page on which I have collection view . After I click submit button I want to navigate to the next page with whole collection views Item Source. So how can I achieve that?? Thanks!
Apart from being truly amazing content, what I love about your videos is actually the fact that I'm doing many things in very similar ways or sometimes even the exact same way 😅 Great job, keep going! I'm really excited for the VS2022 17.3 Release, because I cannot use the Preview since my clients expect me to write production code in a stable environment. On another note related to this video: Is there a specific reason why you use ICommand instead of IAsyncCommand for the navigation?
ICommand is just the attribute name. It will generate the correct one for tou
@@JamesMontemagno awesome!
I actually have a flyout for my pages, there's a logout flyout, this page asks if they want to logout or cancel, on cancel if I GoTo "..", it doesn't work. I'm assuming the flyouts do not affect the navigation stack?
Thanks James, great video. Couple of questions: - What happen with the current page object when we navigate backwards with the ".." , does it get destroyed or is still on memory? - When passing objects, I assume it is possible to pass IEnumerables right? If so, what are the repercussions in terms of memory and speed? Thanks!
1. Should get destroyed just as if the user navigated backwards with a back button. As long as you registered it as a transient. 2. Yup in that buck I showed, it is an object so any object. Shouldn’t be any issue in perf
Do you have a video on how to use a button to bring up the share option for android and ios? And be able to get certain info from the item to be able to share and send to that to someone through text message, email ect? Or if there is any links to Info on that please share
Checkout learn.microsoft.com/en-us/dotnet/maui/platform-integration/data/share
Existe algo semelhante ao componente de navegação Frame do UWP?
Just a general question : Shell app is recommended in .net MAUI ?
When i'm using MVVM community toolki, how it is possible to handle expcetion inside the async commands? Like in James implemetaions of MvvmHelpers? And it is way to make it via attributes? Like [OnError(nameof(DownloadTextCommand ))] StartCommand = new AsyncCommand(Start, null, OnException); vs DownloadTextCommand = new AsyncRelayCommand(DownloadText); // from doc Thanks.
Hello James. Always nice to c your videos. I have a problem with navigation on android app. I try to open file from messenger. Messenger create new instance of my activity, instead of opening existing one. But the problem is, when returning to the main task, Navigation stops working and throws NullRefernce exception. Our Community seems to unable to help. You are my last hope as I see it.
Everytime I navigate to a new page, it has to be created and reload content, sometimes it may seem slow. How can I fix this? With dependency injection? And if I'm not using singletons, what can I do?
Hi James, Is shell still in experiemental state for windows in MAUI? In your video, it seems like it is not experiemental for MAUI? I know it is still experiemental for xamarin forms so im just curious. thx
It is no longer experimental at all and much of it was re-done for .NET MAUI especially desktop.
Hi Guys I am passing an object to my details page, the object is a model with 4 class lists, of the 4 only 2 are passing data to my details page. I have checked my models, view models and code behind all looks good, and the model does have data in all the 4 class lists, where else can i check whats wrong with the class lists that are not passing data to my details page.
Can you do how to bind a list or array of objects? I have 7 pickers in an array that I am trying to link to an array of doubles in my data class (storage). I also use mainly C# for creating my display controls.
See my video on mvvm 101 kzhead.info/sun/g9eoYbGdj5F-qYE/bejne.html you bind to an ItemsSource like kzhead.info/sun/id5_obWub4uAgYU/bejne.html
Hello James. Thank you so much for these videos please keep posting them. I have one question, How can I move the async page events such as: OnNavigatedFrom or OnAppearing to the ViewModel using shell, I would like make all the business logic on the viewmodel and just leave the view to render the UI. Any hint or another video explaining that would be awesome. If that is possible then I am basically getting off from PRISM, since I am like you I prefer to use what is builtin the box. Thanks again for your video
I would look into the event to command stuff that I showed before with the .net Maui community toolkit. Or just invoke your viewmodel commands from the page events. Not the worst thing in the world IMHO
@@JamesMontemagno I tried the .NET MAUI Community toolkit EventToCommand and it did not work and there are no errors triggered on the console. Invoking viewmodels commands from the page events may complicate things later in the future, if we want to maintain a clean architecture, for example, I send a parameter to another page and I need to retrieve information from a web services using that parameter in an async way, so that is the searching of a INavigationAware on the ViewModel, maybe the ObservableObject can implement [IEvent] or something. I'm not sure. hehe just thinking loud. Thanks for the insights! I will continue my researching on that! Otherwise, I may end with PRISM, I prefer builtin stuff and the now powerful CommunityToolkit, so let's see. :)
high five :)
How it would work in a Blazor app?
Hey James I have a question: When I use can appshell be used as a regular navigation page as part of a regular navigation stack? I noticed that when I pop a page async and the previous page is the shell page it says the object is not set.. Any ideas?
'No view found for id 0x4 (unknown) for fragment ShellSectionRenderer{144e6e2} (bb590d38-a227-4c29-919d-301a93128b2c id=0x4)' --- I get that error when i use Application.Current.Mainpage.Navigation.popasync.. it does not go back to the previous page which is the appshell page
I prefer a viewmodel first navigation approach so I use a custom NavigationPage to handle that for me. Navigating to views doesn't feel right after a decade of navigating to viewmodels since I started with WPF in 2010. I probably won't go the Shell route anytime soon no matter how hard the team evangelizes it.
You do you Jin! Everyone has their own preference
@@JamesMontemagno Precisely my point. I wasn't suggesting everyone do as I do. My friend uses goto statements everywhere. I told him why its not recommended to use them but ultimately he has to find his own way. He makes twice as much as me and owns a supercar and house outright so it works for him.
It would be really great if you make tutorial on how to sync Mobile's database with Backend's database
On the list :)
The way of passing object to navigated page is interesting... However, what about the nullable notation for Monkey in DetailViewModel? Since we didn`t initialize the monkey property explicitly, it will be a Monkey? (nullable), and bring in a lot null checking... Please let me know if there is good way to avoid this nullable warnings. Nullable is realy cool feature.
You would pass it a Monkey, i would need to see a demo, or use ! in there. Not sure what your code looks like though. You should be able to do Monkey? wouldn't see why not.
simple question, do you have to have a view model? I want to pass a class object to my other page but I don't want an extra ViewModel. I like DI but that seems to be messing me up a bit :(
You don't have to, you can just add the queryproperty to the page!
Hi James, nice tutorial. I tried shell navigation by passing a dictionary of custom objects. I get an InvalidCastException with the message "Object must implement IConvertible." Are there constraints on the type of objects the dictionary can contain?
Double check that you are passing the type of object and also binding it to the same type of object. In my example it is Monkey and Monkey so make sure they are the same. Don't make it `public object Monkey {get;set;}`, make it `public Monkey Monkey {get;set;}`
I resolved the issue. Apparently, the type of a query parameter must exactly match the type of the argument we pass to it during Shell navigation. In other words, we cannot pass an object whose type is derived from the query parameter type: it does not support down-casting.
What’s about return parameters? Let’s say I navigate to a modal page to collect some data and on closing this modal dialog, the one who opened it wants this data to work with? How would that work?
Would work the same, just put QueryProperty on the page you are navigating back to and add it "..?id=1"
Is passing objects or data in this fashion secure? I'm assuming that since this is a different architecture context, that it is secure and not comparable to a web application where you shouldn't pass sensitive data like this. Is my assumption correct? Thanks!
Absolutely, nothing leaves your app at all. Everything is self contained
We use this for our work navigation, but when we use the device's (android and iPhone) back gesture/button it closes the app outright. On our app we have a tabbed page that as a Main, Settings, Notifications and chat, and all of our content is navigating in and around our Main page. In our Main tabbed page we do our navigation to our individual pages, (for example) the Main page is a "Store", inside the Store page we can navigate to Sweats, Cold Drinks, etc, but if I go to Cold Drinks and use the back gesture (not the back arrow at the top of the page), it'll close the app? I have a personal app that uses a flyout navigation and it doesn't have this issue? Any ideas there?
thanks a lot James.I have one question: How to pass back a result object from a detail page to the main page?
you can use the ".." to navigate back and send information the same way.
@@JamesMontemagnoNot really Edit: beware that the "Default" shell back-button only does ".." by default that's why it didn't worked for me... You're right it works just like forward, just make sure to change the default back buttons behavior!
@James can we pass two ids at the same time? like sid=7 and pid=8
you would do ?sid=7&pid=8
@@JamesMontemagno I'm working on a MAUI application related to stocks. In that, I have to manage a user state so that whenever stock is bought/sold, funds will be used of that specific user. How can I implement this in .NET MAUI?
Is there a fundamental difference between the shell navigation and Page.Navigation?
Yes, they are completely different as Shell offers more customization and abstraction via URI navigation and passing of parameters without having to create new objects and of course makes use of the dependency service.
Hi, I navigate from Page A to Page B. I want to pass values from Page B to Page A when I click back button. Is it possible?
Absolutely! Just add a query property when navigating back
@@JamesMontemagno Thank you
I am having issues when I got 3 subsequent pages, going from 1 to 2 is fine, and back button (both navigation bar and android) work fine, but when going from page 2 to page 3 they don't 😭 And then I'm kinda stuck there, unless I override both the shell and android back buttons 🤔
What seems to be the problem? The back or the forward? Are your pages registered?
Can I pass objects in Xamarin in the same way?
Yes, standard navigation is available as I mentioned, however Shell is the default
Love this video but you did not talk about the pop, push navigations
with GoToAsync("..");
⭐⭐⭐⭐⭐
6:00 you should absolutely have a centralized location that provides all route strings from one place, and it itself is aware of the targets, and can use nameof, but the views and viewmodels do not need to have this extra coupling. Also centralizing the routes and their names makes it way easier to manage and see the big picture of them all, most likely easiest place is that routing class to at the same time insert then into a dictionary/resource/enum other pages can use Also, isn't this all just exactly the same as get/post and routing in backend like flask, only thing that seems different is just the syntax. This feels very much like a downgrade from fluidity of WPF and C# to HTML constraints in how limited it is in comparison. Ofc it makes sense in a way, if we are making it all also web-compliant, but marketing this as something new and cool seems a bkt misleading
Oh sure absolutely! You do you!
I was interested in navigating back, but I find the information you give around 8 minutes into the video incorrect. Shell navigation to ".." doesn't go to the previous page in the navigation stack, it goes one level up in the navigation _hierarchy_ - just like in CLI navigation. Example: Let's assume yiou have a navigation hierarchy like this: MainPage MainPage/BookList MainPage/BookList/Book MainPage/CdList MainPage/CdList/Cd Now, you navigate to a book so your navigation stack is like this: MainPage, MainPage/BookList, MainPage/BookList/Book Now you jump from a book to a CD, changing your navigation stack to this MainPage, MainPage/BookList, MainPage/BookList/Book, MainPage/CdList/Cd Now, navigating Back should take me to MainPage, MainPage/BookList, MainPage/BookList/Book but navigating up ("..") takes me to MainPage/CdList/Cd So my question is: how do you navigate BACK in Maui Shell navigation?
Aha! Found it: Shell.Current.Navigation.PopAsync();
antipatern
Haha $ != ?
I have not seen anything but this app with .net mascot and counter in any MAUI videos. Is MAUI that bad or you guys just want to sell normal videos for dollars?
Take a look at the samples repos for some full samples: github.com/dotnet/maui-samples and github.com/jsuarezruiz/awesome-dotnet-maui
ListView Header overlaps with DataTemplate on iOS, Microsoft should not ship these bugs, they could have solved these issues from the source itself.
Be sure to open an issue at github.com/dotnet/maui
At 7:33 you have gone from the Main page to the Detail page and you say to get back to the main page you could just put in Shell.Current.GoToAsync("MainPage") but I couldn't get this to work unless I put in Shell.Current.GoToAsync("//MainPage"). I'm trying to wrap my head around why. The documentation says that "When a route from the Shell visual hierarchy is navigated to, a navigation stack isn't created. However, when a page that's not in the Shell visual hierarchy is navigated to, a navigation stack is created." so its probably not working because GoToAsync only returns pages on the navigational stack and when you go to the Detail page the only thing on the navigational stack is the Detail page? If so why does adding // to the route work when documentation says that // just searches the navigation stack and replaces the navigational stack with the found page?
In xamarin.forms, I would take advantage of OnNavigatedTo for handling things on page load, etc. Your demo shows the click of a button that shows the Connectivity status - nice. How would you recommend showing the status when a page loads in something like a status page? When the page loads, the status is fetched and displayed. I can't seem to get that working and not sure of how or if OnNavigatedTo will work in Maui. I'd like everything in the page ViewModel and not have to work in code-behind and viewmodel. Great Videos!
OnNavigatedTo or OnAppearing would work fine for this. You would do something with EventToCommand to set that up.
@@JamesMontemagno Not sure I follow ... never used EventToCommand before. Is that a code-behind or ViewModel use? Is there a sample somewhere you could send me to review?
Have you tried this when your query property is defined as an interface rather than concrete type? I get System.InvalidCastException: 'Object must implement IConvertible.'
Make sure that your object types are the same on both ends. See how I had a public Monkey Monkey {get; set;} for example. It must be able to set it to the same object type.
Hi @@JamesMontemagno, If your ViewModel has a property public IMonkey Monkey {get; set;} where the concrete class Monkey implements IMonkey. How would you add an instance of Monkey to the IDictionary for communication over the GotoAsync?