Xamarin.Forms & .NET MAUI Shell Navigation for Beginners

[@manolerash]

Thank you for everything James. You're truly a prophet for us, the Xamarin developers.

[@vukilesimelane2033]

James you do not know how much i appreciate you man. You have made learing Xamarin the greatest experience for me ever!! Thank you James!!!!

[@RobUttley]

Perfect - this is just what I was looking for, regarding getting started with Shell. Off to use it in my new Maui project, thanks!

[@zailajaservices7714]

Saving this for sure. I have been trying to figure this out for about a week now... Thanks SO much!

[@MariuszZaleski13]

Thank you for your work. It's appreciated! :-)

[@0blit]

Great introduction thanks. Would like to see a tutorial explaining how to manage two shell states (e.g. a different set of flyout items being shown for logged-in users vs logged out). This is a common scenario and currently I find hiding items in the shell at runtime breaks navigation (in contrast to docs). It would also be good to explain differences between global routes and the // /// route prefixes. The docs are a bit lacking in this regard and it doesn't always seem to route how I expect.

[@cristisandu678]

Wow! I'm working on an AppShell workshop in Xamarin Forms for Microsoft Learn Students Ambassadors and I'm looking for a tutorial for passing data in App Shell. Thank you very much! ❤️

[@Gleem]

Been waiting for this one thanks James

[@24586387]

Hey James, another great video, many many thanks, I can totally see how to add, and delete items, and to navigate to an item details page. Could you please show how to re-use the add item page in EDIT mode for an existing item. That would be so useful. Thank you for all your amazing work.

[@ЕгорТрафимов-о4к]

Thanks for your videos , it's great, when i'm learn English,i'll repeat all your videos

[@guyincognito1985]

I think they're awesome!!!

[@CraxGaming]

Thank you for listening to me and helping me! :)

[@milesstevenson7050]

I'd be most interested in a deeper dive into best practices for using async. I get it in theory, but I struggle to apply async properly within the application and don't always understand when using frameworks why it is used or not.

[@fredr010]

Really appreciate all your videos. Anyway, at 0:48, when you say you put a video up and point up, there's no video (as of posting this comment). Just thought I'd let you know.

[@franciscopech7774]

I love u James!

[@mieszko5260]

Thank you, great video! I have a questoin; is it possible to pass complex objects ?

[@JamesMontemagno]

With shell navigation it is possible in .NET MAUI. In xamarin.forms you would have to use the traditional navigation

[@mieszko5260]

@@JamesMontemagno Thank you for quick answer ! :)

[@Otonium]

Hi hi, I'm following your very nice explanaions, pausing and contemplating the code every now and then. One request, if possible: Could you make a "long" video explaining the concept of Commands, it's relationship with events and so on. Very very basic I know. But this is the thing: I understand everything you do, except that part. And I'd love to learn from your very experienced skills. Thank you!! Looking forward to watching even more. Pablo

[@JamesMontemagno]

Did you checkout the MVVM 101 video? anything specific? Also checkout docs.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter18

[@alexanderbaron9778]

Awesome tutorial! Could you maybe do a video about styling Xamarin.Forms? I've always found it to be my biggest struggle when writing apps, especially compared to web

[@JamesMontemagno]

On my list for sure :)

[@mikegrainger8082]

James great tutorial, thanks again for the clarity.

[@eudisperdomo7624]

Thank you. Do you know how to change dpi when you use a camera from your application?

[@PaulCuenin]

Great thank you

[@suemanson4683]

Great content, James! Is there a way to view the navigation stack using shell? I was able to do it in the “traditional” navigation but that doesn’t seem to work with shell. Can you point me in the right direction?

[@yuriihonchar9336]

Cool stuff. Thank you.

[@mariselvam6702]

James, Is there anyway to pass complex objects between pages in shell navigation like we do in prism navigation?

[@JamesMontemagno]

in Xamarin.Forms no, but in .NET MAUI yes! I have a video coming out thursday walking through docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation#pass-data

[@belmiris1371]

Pretty cool stuff. Thanks! I could not help but think that the QueryProperty attribute is in Xamarin.Forms namespace so if you use it you have a hard reference to Xamarin.Forms which violates the unit testing thing. Maybe you will tackle that later. I guess you could just create your own classes / attributes in the unit testing project with those names and namespaces? Hm...

[@imtiyazAhmad-gb7tn]

great 👍👍👏👏✔

[@samt1905]

Hey James thank you, can you explain the usage of "/ // ///" differences too? Login and auto login mechanism would be good content.

[@JamesMontemagno]

Coming soon :)

[@AlexS-gn9tq]

I believe even someone who created them can't explain. Their bahavior difers depending on infinite number of things. Moreover, while "route" and "/route" behavior seems to be unpredictable, I wasn't able to see any single difference between // and /// behaviors. The most useless API I've ever seen.

[@tylerwilson3027]

Thank you for the video. Very helpful. Question: I was looking at to do what used to be called master/detail in a tablet app, which is now names Flyout. But that does not seem to cover the case I want of a list of items on left and then update the detail on right side. It appears there is support for this in Shell, so an example would be awesome. Thank you!

[@KGuysTV]

I want to implement in a shell when they log in then check what usertype if user is admin different form/page shown

[@haha-hk9tx]

Ooooh, I didn't know about shell cuz I created my app in blank template 😂😂😂😂. In my next app I'll use this 💜 thank you mr.james!

[@martinvalles9207]

How about that, but in MVVM ?

[@olagisrarikis]

Great content as always. Is Shell the recommended navigation going forward (pardon the pun)?

[@JamesMontemagno]

I think so, i do for all my apps even if i don't plan on using flyout or tabs.

[@shahidouahdi3814]

Hello James and thank you so much for the tutos. I have a quick qst if it does make any sens to you. the first time I navigate to the page, the parameter passed is always null, but when I go back and re-navigate again to the page, the parameter is passed correctly ... I couldn't understand why, if you have any clue, it would be awesome. thanks

[@JamesMontemagno]

I would have to see a sample, but ask questions over at docs.microsoft.com/en-us/answers/products/dotnet

[@jean-baptistedioli1692]

Hello What about if I want to pass an object to the ViewModel ? Thanks a lot :)

[@JamesMontemagno]

Passing data in .NET MAUI with Shell to a ViewModel #dotnet #dotnetmaui

[@ShoniNemavhidi]

James, why is your my coffeeDetails page not bound to a CoffeeDetails ViewModel.

[@JamesMontemagno]

You could totally do that if you were going to provide logic, I showed just how to display the data that is passed in.

[@ShoniNemavhidi]

@@JamesMontemagno I think I understand why I'm having such a hard time now, Instead of defining Name and Roaster in the my viewmodel(s) I just instantiated the Coffee model. It works fine for the add screen, but not so great for the edit screen.

[@ShoniNemavhidi]

Update: Added the properties directly to the viewmodel and works fine now. Thank you.

[@garfieldwithgun]

Great video James, question: how can i add a login page without the hamburger and flyout? I created a flyout project and struggling to add a login page without the flyout menu. Thanks 🙏🏾

[@JamesMontemagno]

See mallibone.com/post/xamarin-forms-shell-login

[@SuperNightassassin]

Hi James! I really appreciate your videos. While this is an advanced topic, can you teach how to have foreground/background services in an app? There doesn't seem to be any decent material on how to do it in xamarin...like...at all lol. Thanks for all your hard work!

[@jayveebelano9041]

Amazing

[@sornt]

Your channel very helpful. Thank you.

[@williamprogramer4168]

gold content thanks for sharing your knowledge

[@vishalmakam7291]

the type or namespace name 'shell' could not be found.. please help

[@ludologian]

Is it possible to have dynamic shell i.e bi-directional binding with user preferences. ( Dark mode /customizable colour/ shortcuts animations etc..) another question if I can use visual studio designer tool to make custom animation? a WYSIWYG tool for blazor maui similar to webflow / figgma would be crazy awesome .

[@MuhammadNadeem-wj6xd]

nice another one!

[@yazeedshahin5224]

James, you are awesome thank u so much

[@JohnSilvanus]

Hey, thanks for all your videos, you're really helping out! Just a question relating to data passing to the detail page: if you wanted to send a url in a parameter that might (or might not) have & or ? in the link itself, how would you go about delivering that data?

[@JamesMontemagno]

You could probably encode and decode the url before passing it -> Uri.UnescapeDataString

[@pelinkonaray5027]

Hi, thank you for video! How can I set FlyoutLayoutBehavior as Split on Shell Flyout in tablet view? I set FlyoutBehavior as locked but when I set it, detail page wasn't displayed (it shows black screen). And I couldn't set FlyoutLayoutBehavior in shell.

[@Mr.Thompson]

Hi James, how can I pass data directly to the view model in a .NET MAUI app, when the view model has no non-default constructor, i.e., has parameters for dependency injection? AFAIK then I cannot bind the view model directly in the XAML code, so the page doesn't know which view model it would need to instantiate and pass the data to. Is there a workaround or did I just miss something?

[@JamesMontemagno]

Why I LOVE .NET MAUI's NEW Shell Navigation - Push, Pop, & Pass Objects kzbin.info/www/bejne/bquboq1jhcqDosU

[@sergiuungureanu1085]

Thx James, great video as always. Quick question any idea what the future of PRIZM is in relation to Shell, I like the features shell provides but on the other hand I think PRISM has a simpler implementation of navigation and binding. So I guess I wonder if would we be able to use the best of two worlds in future or is PRISM going to be deprecated in favor of Shel? thank you.

[@JamesMontemagno]

You can totally use Prism and a lot of people do. I just like to walk through the core platform and features. I personally don't usually add on any additional frameworks.

[@chiyungtang8051]

Hello James, First of all thank you for all the great video tutorial. I am self learning Xamarin since I have a bit of C# experience, thus, choosing Xamarin over Flutter. Your tutorials are great. I tried your data passing method from page to page where the receiving page receive the data as its BindingContext in the OnAppearing() in the ocde behind. However, I notice with this BindingContext set , it seems dominated the BindingContext forever as model. in the corresponding XAML file, for a button control that I wish to use a different BindingContext to point at a different viewmodel using the x:DataType="viewmodels:VM_ProductUpdate" , it compile without error but when I clicked the button, the command won't execute. I tried the relative source as well but still it doesn't work. I don't know what's wrong. Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:VM_ProductUpdate}}, Path=Task_Update_AsyncCommand }" The exact same piece of button code works fine at the main page where no data passing via BindingContext. Had been spending the last 48 hours trying this and that but haven't figured out why yet. Can help to shed some light on this?

[@JamesMontemagno]

Hey there! I would have to see a source code sample somewhere. If you can put something on GitHub and shoot me an email would be great

[@davidmccollough4791]

Does navigation work the same way if I’m not using shell?

[@JamesMontemagno]

It’s a bit different docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/

[@riffysam6938]

With Shell/Flyoutitems, How can I get the Shell Content to refresh the Route page and the related data? At the moment, regardless of what Flyoutitem I select, only the Page/data of the first Flyoutitem selected is displayed. The Route/DataTemplate for each Item is different. Have debugged/googled for solution, but without any success.

[@stefanvogel9770]

Hey James is it possible what Shel navigation doesn't work wit queries on iOS ? I am developing on Mac and I only getting null as query parameter. I tried everything and nothing help. Maybe you know more it will be very helpfull. Thx for your work !!

[@stefanvogel9770]

So after some research I found out that the value will be set after the consructor of my view model, so I have null value as query in constructor. and then the constructor finished then the query value will be set :/

[@JamesMontemagno]

Yeah that one catches me everyonce and a while

[@stefanvogel9770]

Do you know hot to handle that correctly ? To load stuff from database asynchronere awaited ? Because I want to handle it professionally :D Hot to build the perfect architecture for that And thank you for your fast answer and for your work here on KZbin you help many people here !!!!

[@abdulazizalzayed2979]

thanks James! really amazing!

[@gaborsztarcsevics16]

Hi James, I noticed an insanely big bug with the Shell navigation. Let's say we add 3 FlyoutItems to the Menu. After that navigate to the first one, then the second one, and finally the last one. Then press the back button of the mobile phone (I have Android 11). It will collapse the whole application to the background instead of navigating back to the second Page. What do you think? That is a huge-huge UX bug In my opinion.

[@JamesMontemagno]

This is pretty common in app to work this way. Tabs aren’t pushed onto the stack. You could of course override the back button and do whatever you desire

[@sipepguru]

Can we pass objects yet? Wasted 2 weeks on xamarin forms shell,

[@JamesMontemagno]

You can use standard navigation where you pass in things to a constructor and that works fine Shell, but the url navigation is that a url navigation which is an advantage to shell that you can use both.

[@maxblue8623]

When i click on the "add" button, i get this error: "Exception has been thrown by the target of an invocation" And i can't solve this trouble(. What does it means?

[@JamesMontemagno]

Where specifically in the code? I may have a bug in there, will have to look.

[@maxblue8623]

@@JamesMontemagno I know, that TargetInvocationException masks the real exception. In my code this exception indicates this: var route = $"{nameof(AddMyCoffeePage)}"; P.s. I did everything like you, rechecked a hundred times, but nothing :(

[@JamesMontemagno]

@@maxblue8623 Hmmmm did you register the page? github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/AppShell.xaml.cs#L12 You can send me a link to your github repo I can take alook

[@maxblue8623]

@@JamesMontemagno KZbin deletes my comment with a link to my repo :\

[@Steven-hq6df]

I'm not sure if I'm doing this right, but to load the coffees from the database automatically when navigated to the Mystoredcoffeepage, I created a function in MyCoffeeViewModel() that is async Task Load() { IsBusy = true; var coffees = await CoffeeService.GetCoffee(); Coffee.AddRange(coffees); IsBusy = false; } Then I do var task = Task.Run(async () => await Load()); from the MyCoffeeViewModel constructor, and it works. But I'm not sure if it is the "correct" way to do it.

[@Steven-hq6df]

Ui is not being locked up, so I assume it's correct

[@JamesMontemagno]

I would call it from the pages OnAppearing method and not the constructor

[@YuzzyBee]

Hi! Simple question. If the Reload() function (described above) is in the OnAppearing method of the list, will this function be called every time I return to the list? After adding a coffee for example (with a "normal" navigation not Shell)? Because I would like to reload the list automatically when I come back to it without having to refresh manually. Thanks

[@rajnikantpatel4963]

How can we pass selected coffee object to detail page?

[@JamesMontemagno]

Like I show I have a caching service that queries my database for the full object. You can always serialize our your object or you can use the traditional navigation if that serves you better. It works with shell too.

[@grogirh]

Is there any reason why when I create a new page and, without modifying anything on the page, I try Routing.RegisterRoute(nameof(X), typeof(X)); the app crashes and don't navegate to the page? It works if I route a page which is actually on the flyout, but with a new one always happen the same error. Thanks for these tutorials!!

[@grogirh]

I find the error, for some reason when I call the await Shell.Current.GoToAsync(route); the method calls the constructor of the page, then enter on the InitializeComponent and when it finish enters again on the constructor of the page so it's an endless loop.

[@carljohnlopez5425]

anyone , is it possible to put OnAppearing() in a binding context view model?

[@JamesMontemagno]

You could do something like using the EventToCommandBehavior stackoverflow.com/questions/56826222/pass-onappearing-to-a-viewmodel-in-xamarin-forms-mvvm

[@moussababaousmail805]

I'm new in Xamarin and i coudn't make a step without your tutorials. Please i need your help. I used a label to display an value "ParentId" which is passed from another page as a parameter in Xaml: in viewmodel: [QueryProperty(nameof(ParentId), "ParentId")] ....... public string ParentId { get;set ; } The problem is that the label doesn't "always" display the value even though the value is always passed correctly (I am sure because it is saved in a database and i can read it). Thank you for your well done videos.

[@JamesMontemagno]

Are you raising property changed? github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/ViewModels/MyCoffee/AddMyCoffeeViewModel.cs#L16

[@moussababaousmail805]

@@JamesMontemagno It is solved. Thank you. But why to add this intetmediate variable "name"? And how it is updated. To save your time please refer me to some doc. Thank you another time.

[@JamesMontemagno]

@@moussababaousmail805 See docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation#pass-data

[@AlexS-gn9tq]

The real fun begins in a real-world applications where this magic string-based navigation becomes a nightmare and you end up with custom solution making shell navigation strongly typed. Besides it has tons of corner cases and differences in behavior depending on multiple circumstances so no one can really understand how this / // /// absolute-relative magic works and what result can be expected

[@eduard.schaefer]

Hm, weird. Why not just use Prism? Its there for years.

[@JamesMontemagno]

You can totally use Prism and a lot of people do. I just like to walk through the core platform and features. I personally don't usually add on any additional frameworks.

[@rahul_salokhe]

Hi I try to use await Shell.Current.GoToAsync("HomePage") in mvvm view model but it's not working

[@JamesMontemagno]

Did you register "HomePage" with the shell navigation routing? github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/AppShell.xaml.cs