.NET MAUI's Navigation for Beginners - Push, Pop, & Pass Objects

[@FlorentBathily]

Thanks a lot for your big contribution to the community ! Big up from Africa-Mali

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".

[@NAB26]

Right on time for me, as I was trying to figure out how to do that. Thanks James!

[@TonyEdwardsPZ]

This was really useful. Thanks for taking the time to make it.

[@faranahmadk7401]

Thanks James for explaining how to pass objects!

[@JamesMontemagno]

You bet!

[@icanghana6477]

Hey James You Are Doing Great Work For The World

[@mubarekabdi]

Passing object is an amazing feature. Thank you guy

[@rushas]

Inspiring! Very well structured and explained.

[@cyrildouglas9262]

Great explanation, thanks for your efforts.

[@mallen1846]

Love these videos on MAUI

[@RajK09]

Thanks for this tutorial James, it's nice and really helpful. Thank you!

[@zahaietskyi]

incredibly, you makes best tutorials videos in the world

[@edgardavidaliende9121]

great video and amazing new feature

[@evgeniilewicki5874]

Thank you very much for the video. I have reviewed a lot and I am healthy that they help me develop.

[@kopilkaiser8991]

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.

[@kopilkaiser8991]

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

[@ruinov241]

Super , thank you very much James.... I am learning a lot from your channel

[@mariselvam6702]

Its amazing. Loved it,

[@victorchisomnwisu9776]

I always look forward to your videos. I really hope Maui development would be isolated from visual studio tooling

[@JamesMontemagno]

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

[@neiltsakatsa]

@@DM-98 WitchCraft >_

[@heitoreleuterio4826]

Great video man, thx =)

[@JamesMontemagno]

Glad you liked it!

[@THE_NE0]

James, We need pop-ups

[@THE_NE0]

How to create a custom popup that applies in all the platforms in a easy way with MAUI

[@JamesMontemagno]

There are a bunch of display pop ups, but also they are in the .NET MAUI Community toolkit! Check it out

[@andycope6683]

Cheers! very very helpful

[@jeanhibbert]

Thanks James!

[@cizzl3702]

Amazing video! Thank you!

[@caneker5496]

Thanks so much f

[@jonatancordoba7984]

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 😁

[@Luca_040]

What Win7? It's not supported anymore

[@jonatancordoba7984]

@@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.

[@viruslab1]

awesome stuff, thank you!

[@JamesMontemagno]

Glad you liked it!

[@lerocher2182]

Thanks James. Can you please make Video about how to navigate between Pages with Hamburger-Menu and Shell-Flyout?

[@bikashghosh245]

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.

[@myhjrhfgnb]

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 :)

[@rushas]

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

[@bibeljoe1597]

thank you!

[@JamesMontemagno]

You're welcome!

[@TaoriUTS]

I can already see me using this instead of WPF for all future development because of the mere navigation convenience

[@viccotr]

btw, the parameters can be removed from the query if you using IQueryAttributable to do some actions above the parameters

[@ismaelsanchez3164]

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!

[@JamesMontemagno]

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

[@yuriyholembyovskyy1223]

Hi James! Great content as always) How to implement "Login flow" with the shell when we need to specify the first page dynamically?

[@JamesMontemagno]

I covered this here: kzbin.info/www/bejne/r53FmIp-d8Sag6s

[@rotcehr2d269]

Awesome

[@alamzaibfarooq]

You are great!

[@Sebastian198910]

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?

[@JamesMontemagno]

Would work the same, just put QueryProperty on the page you are navigating back to and add it "..?id=1"

[@UzairAli001]

It would be really great if you make tutorial on how to sync Mobile's database with Backend's database

[@JamesMontemagno]

On the list :)

[@ZeroInfinityVideo]

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?

[@kennethlokshall4854]

Takk!

[@williamliu8985]

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.

[@JamesMontemagno]

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.

[@tropictiger2387]

Do you have a video of making the app in the thumbnail? I would like to know more about working with and styling CollectionViews.

[@wedson.0]

Existe algo semelhante ao componente de navegação Frame do UWP?

[@TheITcook]

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.

[@nanayaw5646]

Love this video but you did not talk about the pop, push navigations

[@JamesMontemagno]

with GoToAsync("..");

[@apollorealms]

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?

[@benjaminkeller5851]

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?

[@xeekk]

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?

[@PaulTaka123]

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.

[@jdia.]

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

[@JamesMontemagno]

Checkout learn.microsoft.com/en-us/dotnet/maui/platform-integration/data/share

[@trustingod0]

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 !!!

[@davidebur]

thanks a lot James.I have one question: How to pass back a result object from a detail page to the main page?

[@JamesMontemagno]

you can use the ".." to navigate back and send information the same way.

[@MrPetschko]

@@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!

[@preetijadhav2550]

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!

[@iVictorHugo]

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

[@JamesMontemagno]

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

[@iVictorHugo]

@@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. :)

[@menakasattmann5335]

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?

[@jfras2359]

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.

[@ramasamynagappan7586]

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?

[@JamesMontemagno]

Absolutely! Just add a query property when navigating back

[@ramasamynagappan7586]

@@JamesMontemagno Thank you

[@ademineshat]

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 😉

[@jinparksoul]

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.

[@JamesMontemagno]

You do you Jin! Everyone has their own preference

[@jinparksoul]

@@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.

[@mariselvam6702]

Hi James, Is there any examples available for push notifications with Maui chat app ?

[@spaprune]

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?

[@lukaskuchta1010]

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.

[@retrx4236]

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.

[@davidjackson148]

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 :(

[@JamesMontemagno]

You don't have to, you can just add the queryproperty to the page!

[@easterwho]

Is there a way to push a tabbed page onto the page stack? e.g. a tabbed details page?

[@miguel4063]

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!

[@JamesMontemagno]

Absolutely, nothing leaves your app at all. Everything is self contained

[@WolfRose11]

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.

[@JamesMontemagno]

See my video on mvvm 101 kzbin.info/www/bejne/hqTSYoCbjcR7rKs you bind to an ItemsSource like kzbin.info/www/bejne/jKupooSsbb59hK8

[@christopher19843]

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?

[@harrydang5248]

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?

[@JamesMontemagno]

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.

[@greeksinmars]

Just a general question : Shell app is recommended in .net MAUI ?

[@jovanm90]

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 🤔

[@JamesMontemagno]

What seems to be the problem? The back or the forward? Are your pages registered?

[@ATNL4]

high five :)

[@_jimbarton]

How it would work in a Blazor app?

[@jewersp]

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?

[@JamesMontemagno]

ICommand is just the attribute name. It will generate the correct one for tou

[@jewersp]

@@JamesMontemagno awesome!

[@vibol03]

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

[@JamesMontemagno]

It is no longer experimental at all and much of it was re-done for .NET MAUI especially desktop.

[@msoulforged]

Is there a fundamental difference between the shell navigation and Page.Navigation?

[@JamesMontemagno]

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.

[@faranahmadk7401]

@James can we pass two ids at the same time? like sid=7 and pid=8

[@JamesMontemagno]

you would do ?sid=7&pid=8

[@faranahmadk7401]

@@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?

[@shahanahmed9444]

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?

[@shahanahmed9444]

'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

[@abdulkaba3223]

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?

[@JamesMontemagno]

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;}`

[@abdulkaba3223]

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.

[@balintnagy1293]

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?

[@balintnagy1293]

Aha! Found it: Shell.Current.Navigation.PopAsync();

[@faborgangnam5511]

Can I pass objects in Xamarin in the same way?

[@JamesMontemagno]

Yes, standard navigation is available as I mentioned, however Shell is the default

[@Songfugel]

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

[@JamesMontemagno]

Oh sure absolutely! You do you!

[@williamprogramer4168]

⭐⭐⭐⭐⭐

[@scriptboris]

antipatern

[@MichaelArgentini]

Haha $ != ?

[@arthurkelley]

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?

[@JamesMontemagno]

Take a look at the samples repos for some full samples: github.com/dotnet/maui-samples and github.com/jsuarezruiz/awesome-dotnet-maui

[@fayazvar3948]

ListView Header overlaps with DataTemplate on iOS, Microsoft should not ship these bugs, they could have solved these issues from the source itself.

[@JamesMontemagno]

Be sure to open an issue at github.com/dotnet/maui

[@davidpugh9947]

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?

[@Andyman35uk]

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.'

[@JamesMontemagno]

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.

[@Andyman35uk]

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?

[@btigenie]

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!

[@JamesMontemagno]

OnNavigatedTo or OnAppearing would work fine for this. You would do something with EventToCommand to set that up.

[@btigenie]

@@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?