Navigation with .NET MAUI Shell - .NET MAUI Tutorial Step-by-Step

[@jfversluis]

💡Looking for the next part in this course? Click here to find it, you will learn in this video how to leverage platform features with .NET MAUI: kzbin.info/www/bejne/m4O7mpyvbZVjjrs Want to review the full playlist? You can do that here 👉kzbin.info/www/bejne/o5i6Z6usns6lh80

[@Mielesplayz]

You forgot to pin the comment

[@jfversluis]

@@Mielesplayz Thanks!

[@Mielesplayz]

@@jfversluis No problem

[@rikudouensof]

Great explaining the necessary data. transfer from page one to page 2

[@jfversluis]

Glad you like it, thanks!

[@davidjackson148]

From all the examples I can find around MAUI Shell, there is not a single one that shows Flyout on any other page other than the first page. It seems like it's always assumed you want your app to start with the Flyout navigation and I don't. My app has a couple of pages to get through before you get the the Flyout page. How do I do that please. Can you do a video?

[@PierreH1968]

Thanks!

[@jfversluis]

You’re very welcome Pierre!

[@MrBigdogtim69]

Another good video. I like that the example project is passing a Dictionary object - I know I field a lot of questions on URI navigation with parameters. The most common scenario I see is a List/Collection view tap to a detail page where the List/Collection view has business objects (e.g. contacts). Even when they have the entire contact object/record in the ObservableCollection in the main page, they pass an index or key and look up the contact again - so showing a concrete example of a complex object being passed is a good "pro tip". The series is coming along nicely!

[@jfversluis]

Hoping to continue on this path! That is exactly what it's about, showing off the basics in a real sample that is coming together. Glad you think it's helpful. Now the pressure it on to keep it up...

[@rasmusb639]

Could you do one on maps in MAUI? With custom markers and perhaps styling - it's the one thing keeping me from migrating from Xamarin to MAUI

[@jfversluis]

The official maps support will come in .NET 7 so I will wait a little bit longer for that one!

[@davidjackson148]

I'm lost. I can't see the relationship between the Dictionary passed in and how you get that in the view. Seems kinda random. I want do send one or more models to my new page, some with page data and others with security data. How do I do that. Is this the only way to do this? Do I have to have a page ViewModel? My app is becoming cluttered with ViewModels and all I want is to get at the data passed.

[@valgardg48]

navigation and passing data itself works great, but i am having an issue with updating the data displayed on the details page. When I update the observable property, no changes are applied in the ui. Any idea what the problem could be? Everything is done according to the previous videos

[@leosouza1520]

Very good explanation of how to pass complex objects as shell navigation parameters.

[@jfversluis]

Thanks!

[@madsvering7383]

Regarding passing object upon navigation. I need to pass an exception. I put this into Dictionary, but seems like the Shell navigation requires the object to implement the IConvertible interface: System.InvalidCastException: Object must implement IConvertible. Can Shell "navigation parameters" in the form of a Dictionary be used here, or will I need to figure out another place to store the exception while navigating, or will I need to refactor the code?

[@nicolarigoni1062]

Great example, but if I son't use shell how and for example I start with a NavigationPage in the App.xaml how in the best way to pass data to another page called in a navigation or maybe to another page that is a modal? always thought MVVM and dependency injection pattern? Thanks

[@25kyro]

When I tried shell routing in Xamarin , my iOS version was glitchy on the bad navigation. Whenever I navigated back to the page , it would have an empty view. Is this fixed in Maui or was this an error on my part?

[@duncancole1742]

I've done a few production apps using Shell and never encountered an issue like you've described (there certainly have been issues with navigation though, particularly with routing) so I reckon keep digging into the problem and you'll get to the bottom of it :)

[@garyhengeveld4452]

How can I navigate back to the "MainPage"? Shell.Current.GoToAsync("MainPage") just give an unknown error.

[@jonathanbushby966]

That’s what I was wondering. No back button, where is it?

[@Danilo-zr7bz]

Thank you! It really helped me.

[@acc6540]

Hi Gerald, I hope you are well Thanks for the tutorials Gerald, can two shell pages be used in one App?

[@tanakamawere]

Hie gerald. I feel like you rushed past somewhere on the Gesture Recogniser part with MVVM. I am trying to follow the docs but there are a couple of problems. 1. x:DataType which links to my model does not define the Command in the viewmodel. So I can't run them both together. 2. Parsing the tapped item through to the ViewModel. I suppose that is what CommandParameter is for but I am failing to implement it

[@kratos7ism]

i have the exact same problem . Did you find a workaround ?

[@shahanahmed9444]

Lets say you are making a social media application like facebook, for example. How do you prevent opening a duplicate page? lets say I have a users profile page already open in the stack, how do I prevent opening the same user profile page which will cause the stack to have 2 of the same pages. I hope you get what i am trying to say.

[@mugileeshwaranj.s8484]

How to handle navigation in non UI classes, i have to use navigation inside the class which is inside andriod folder..

[@myMovieManager]

Hey Gerald! Potential bug. Passing an object to a new page, in the VM the observable property value is null until the page is loaded. You are unable to access passed values of an object in the VM constructor. Very annoying if your wanting to load some data from a WS

[@jfversluis]

If you really think something might be up check the repo of it’s already reported or, if not, open something yourself!

[@duncancole1742]

On the topic of Navigation and Routing: I had a particularly annoying issue with iOS navigation if my UI had an overflow 'More' tab on the bottom navigation. iOS it seems, creates it's own intermediary 'more' controller to host the various more options which Xamarin Shell seemingly didn't have any idea about so you could not use routes (e.g.//more/somepage) to get to any of the pages in the overflow. It worked fine in Android because Android just creates a little context menu instead so all the overflow tabs where at the same top level (e.g. you could navigate to one with just a //somepage route). My fix was to just explicitly create a More tab myself that had links to all the overflow tabs which meant that a route of //more/somepage would work. Was a bit of busy work and it would be good to know if MAUI has fixed this problem. Also, will the standard Login flow be better supported in MAUI Shell? The way I've been doing it when I have an app that requires the user to sign in first is to hook into the StartUp class and get it to go to the login page instead of "await Shell.Current.GoToAsync("//main");" if they are not authenticated. It just seemed like a bit of a janky way to do it so maybe there's a better way already.

[@zikkrype]

I'm getting errors: "relative routing to shell elements is currently not supported" or "Global routes currently can't be the only page on the navigation stack" when I try programatically navigate from viewmodels

[@trendytrailer2746]

How to find the that navigation is happening for the backward in codebehind of any page in appshell.

[@michaelrogers6935]

I gather you can handle the tap either in code-behind or as a command in the view model. Why (at the 6:40 or so mark) did you choose the former? Great video, btw. Next time I teach software engineering I am going to make this entire series required viewing. Another question: does it matter if you typecast the sender to be a ViewElement or Frame?

[@jfversluis]

In this instance I chose the event simply because that is a bit easier to explain. The navigation is already present in the page. Else, at that point, I would need to go explain about how to get the navigation inside of your view model, hook up a command and then call that command inside your page. Which technically if you want to do it "right" (if that's a thing to begin with) is what you should do, but it's always hard to find a balance in these videos between overwhelming someone and just teaching the core concepts. > does it matter if you typecast the sender to be a ViewElement or Frame? Not really, both are in the same inheritance tree. If you need properties specific to a Frame, cast it to that, if you don't cast it to the other. Thank you so much for the kind words, appreciate it! Glad you're enjoying the videos!

[@AwesomeRob77]

Great video, but I have a question. I opened the MonkeyFinder SLN for Part 3 - Navigation and it runs fine making the service calls as a Windows app. However, running on an Android simulation it does not display the data. I can step through the code and see the data being returned from the service (13 monkeys), but it never displays like in the Windows version and the beginning of this video. Suggestions?

[@prerns]

HI Gerald, Thanks for the amazing videos. Could you make one video for creating a flyout menu goign from a login screen please. Had Tried using Flyout Page and was running into issues. Then tried using Shell F;youtItem which works but I need a custom Flyout Menu Page.

[@janne_kekalainen]

Just FUI for people on Windows running dark system theme. The details page appears broken due to the dark theme background color defined in App.xaml being damn near the label text color. So the page appears to not load the labels, but it does, they are just defacto invisible.

[@shahanahmed9444]

I have a login page which is a navigation page. After the use has logged in successfully how do I open a shell page where remaining navigations will happen in the shell?

[@agentgreen521]

Hi Gerald! Another great video. I have a question. How about the navigation going back to login page? I have injected the vm for loginpage but when i'm trying to do the mainpage navigation for login pagei need to inherit the vm again. Is there any simple way to do this. I'm new to this kind of dependency injection. Thanks!

[@Pukoization]

Hello Gerald. Great explanation again. I have one question regarding registration of pages. In your video, you are registering all pages as transient. Is this a good way ? Maybe it would be better to register it as singleton and somewhere in navigation change the bindingcontext of the page. Not sure if this is possible but it may improve performance because the page was already rendered and you just need to set a new bindingcontext to change the UI. What do you think ?

[@FortyTwoAnswerToEverything]

Do you know why the Windows app doesn't live update on changes but the android emulator does?

[@jfversluis]

Hm no, Windows app should do that as well!

[@tasher7882]

Loved the vid. fallowed it to a T and it works on Windows, but not on Android. I am using the Samsung SM-T580 android 8.1 - api27. And it comes up with the page. When I click on the command button it hits the command gets the monkeys and puts the in the collection. But the view doesn't show anything. Kind of scratching my head. Any ideas?

[@jfversluis]

Hm might be a but that is going on on Android right now

[@markiiankhylynsyi2039]

What native android control does shell use for the NavBar?

[@jfversluis]

The regular AppCompat ActionBar

[@rollycervantes4702]

Hello Gerald. Great videos and explanations. I have a small question. What do you think is the best way to load the data instantly without the use of the button "Get Monkeys"?

[@Golden_games]

put the get monkey code in the constructor of the page

[@michaelrogers6935]

One more question -- can someone tell me if this summary is correct, or if not, what needs to be done to make it correct? When navigating to a page, if there are queries, the system looks to see if the page has a view model, and if that view model is IQueryAttributable. If so, it fires up that view model's ApplyQueryAttributes method.

[@jfversluis]

Not sure if I understand you correctly... The way it works is, while navigating you can pass in any object, simple or complex, and that will be provided to the page you're navigating to. The object you're passing is given a unique key. By adding the QueryProperty attribute on the receiving page (or view model, it really doesn't actually matter) you can specify the key you set from the origin (where the navigation is triggered) and the property in the receiving object. There is no strong connection between the origin of the navigation and the receiving (the view model in this case) as far as I know. By applying that QueryProperty attribute it will probably register to receive any navigation collection with that specified key. Then it's up to you to connect the view model with the view through setting the BindingContext. Hope this helps!

[@michaelrogers6935]

@@jfversluis Thanks for this (and all the other answers!) I wasn't sure how the query -- which I thought was destined for the page being navigated to -- made its way to the view model instead, and was trying to postulate the mechanism. But I guess all I really need to know is that the query goes to either, if they have the QueryProperty attribute I am curious how the system can identify a page's view model -- because there isn't a ViewModel class being extended. Is it any object passed to a page's constructor that is an INotifyPropertyChanged, and that someone the dependency injection magic is sorting this out?

[@madsvering7383]

Hi Gerald, what if I don't want monkey to be an observable property? Search for just "Property", but no luck.

[@jfversluis]

Sorry I'm not 100% sure what you mean?

[@madsvering7383]

The Monkey variable “monkey” is annotated with ObservableProperty. I tried without that annotation, but seems like the toolkit uses it to tie things together. However, I do not need it as an observable property, just as a normal property/variable that I can use in business logic. Thx.

[@jfversluis]

@@madsvering7383 the observable attribute is there so it will update the ui automatically when there are changes in the data. If you don’t need that, just take it off and use the object as normal

[@madsvering7383]

@@jfversluis thanks a lot for your reply and great videos. However, removing the [ObservableProperty] annotation seems to break the auto-assignment of the monkey variable done by the toolkit. I still need to transfer the monkey from view a to view b, but in my case I do not show it on the UI (so no need for the ObservableProperty), I use it in business logic. So to me it seems that [QueryProperty] annotation on the class only works woth fields that have the [ObservableProperty] annotation. Is that correct? Of course I could just use the ObservableProperty but seems like the wrong way of doing it in my case.

[@madsvering7383]

Hi, Sorry @jfversluis my incorrect conclusion above was due to the fact, that I did not have a public property when I tested, just a private field. With a public property it works as you say, without the ObservableProperty annotation. That public property is auto-generated by the community toolkit, when using the ObservableProperty. Thanks.

[@davidjackson148]

Is the only way to pass objects using view models? I just want to pass the object and have the page work out what to do with it without having to create another view model. so how can my new page get the object passed in without having to use the viewmovel ? or is this not possible

[@jfversluis]

A view model is just another object. If you can pass a view model you can pass any other object as well :)

[@davidjackson148]

@@jfversluis That's the problem. I can't even pass that, I can find no way for the receiving page to get at the object passed to it. All the examples I've seen do the same as you. I can't seem to pass dependency objects and dictionary objects at the same time. The passed object is always null

[@serique1323]

@@davidjackson148 make one more class init, like public MyClass(SomeClass obj) { InitialiseComponent(); BindingContect = MyVM(obj);} also you need to make changes to VM

[@ricardofernanddes4218]

how can in open a instagram profile with a instragram icon in my menu? help-me please

[@jfversluis]

Sorry, not sure what you mean!

[@r.gopalakrishnan6926]

Interesting...💫

[@jfversluis]

Thank you!

[@tarktaro3861]

Awesome

[@jfversluis]

Thanks!

[@TheErudito]

Nice shirt

[@jfversluis]

Thank you!

[@ManderO9]

bro so many monkeys, idk which is which

[@jfversluis]

🐵🙈🙉🙊

[@jfversluis]

🐵🙈🙉🙊

[@resler7ooo118]

Great s

[@jfversluis]

Thank you!

[@kainafa]

Awesome 🚀

[@jfversluis]

Glad you like it! Thanks!

[@leonedev]

Shell.TabBarBackgroundColor actualy is broken, if you set i to transparent it will instead put a #f7f7f8. If you have suggestion on how to fix this, would be great.......

[@jfversluis]

Please check the issues on the repo. I'm not familiar with a bug like this!

[@leonedev]

@@jfversluis already checked but issues are never addressed/solved, difficult to use maui with these bugs, also there is a bug with the shell navigation when using tabbar while nesting child ShellContent but without some properties on it, i mean...and it's after .net 8 release. I'm pointing this out just because I see that you deliver good content on Xamarin and MAUI and maybe you are involved with it. In any case keep up the good work!

[@jfversluis]

@@leonedev I am working on the .NET MAUI team so yes I'm involved ;) we're constantly evaluating our priorities and unfortunately these didn't seem to have made it to the top of the list yet. If you can give me some issue numbers I can have a look