🐚 Shell for .NET MAUI & Xamarin.Forms - What, why, and how?!?!

[@mlhtest5928]

James bro, I just want to say thank you for all that you do! Man I was stuck as I'm trying to learn Maui, its been some yrs since I've done any mobile dev, but your videos are a tremendous help. I will most def buy some of your gear to show my appreciation. Have a great one!

[@user-v2u-c2j]

Thank you KZbin for the great advice❤

[@andrewsheley]

Was just starting with Maui and was wondering about the shell, perfect timing!!! Another great video, thanks!

[@pgklada]

I like the idea of MAUI shell... I am a newbie in MAUI, but with 50- years of programming practice... retired :-)

[@oliverwaits8174]

These videos have been amazingly helpful! I have been developing a MAUI using the shell and makes the process so much easier. One issue I have been struggling with is query parameters are not reset if left out of the route so if you call a page after using a route with a filter it keeps the old filter.

[@JamesMontemagno]

Hmmmm i would open an issue for sure

Is the ViewModel configured as a singleton?

[@Cyberfoxxy]

Stumbled upon MAUI shell on reddit and was confused because Shell is apparently a new thing. But Shell is also something very very old in Linux. You seem to have cleared up that they are in fact, unrelated.

[@ddupinsus]

This is getting really interesting, I love it… Thank you!

[@kinsondigital]

Awesome videos James!! I am super excited for MAUI and I am finally to the point where I can start using it for some internal tools to make my development workflow easier for my OS project Velaptor and CASL.

[@harlanbrewer4503]

Thanks, James. I'm enjoying your Xamarin tutorials

[@JamesMontemagno]

Glad you like them!

[@FaheemRasheed]

james , the way you explain things is truly god gifted.you make complexity of things sound so simple that it becomes interesting. i guess if some f the real apps were reviewed by you and make videos about what could be better way of doing if any or things that should be avoided. you can start with my first app that i developed after watching your xamarin series :) please dont stop doing what are you are truly good at. keep em posting !! and please some videos on animations and transitions for beautiful user experiences.

[@MorningStar.Ghost.Yaldabaoth]

Awesome! How to customize the margin between each tab of Shell tabs?

Shell for .NET MAUI looks awesome! I was wondering if you could give some examples of when not to use shell, when MVVM or normal view/page navigation would be better?

[@JamesMontemagno]

As of today there is a tiny perf hit on startup, however I haven't really noticed a huge difference. I just always use it personally unless upgrading an older app that doesn't use it.

[@cliffshivkar9948]

Great vid as always man! Thanks. On a different topic... Could you please do a video on how to handle the back button in a UWP app in a Xamarin Forms Shell application?

[@HeinrichDaHammer]

I am just getting my feet wet with MAUI, so far I am loving it, thanks for the video.

[@CrkdLtrN]

Thanks for taking the time to do this, James! Helpful! Will you plan on doing some videos with various integrations like Stripe + Apple Pay + Google/Android Pay? It would be super helpful to start touching on bringing in some of those other frameworks for functionality as most people do want to put some sort of payment processing into their apps. Thanks again.

[@xamerdev7381]

Hello James, will there be a possibility in the future to create fully customized tabs in MAUI and Shell? As far as I know there is no possibility to create customized tabs in xamarin shell. Or you can via XCT but they are not connected with shell functionalities.

[@neilsg2001]

Have u covered apps that continue after losing focus. Running like a service? 👍🏻👍🏻

[@jeffm3865]

Great video. At around 10:45 into the video, you added a Coffee2. When you returned to the main page, you had to pull to refresh to show the updated list. Any recommendations on how to refresh automatically after the coffee was added automatically? I think some code could be added when the main page was navigated to after the add occurred. Is there a more elegant way to do this?

[@JamesMontemagno]

That is probably the best way. I sometimes save a preference around saying I modified data and then on appearing check it

[@greeksinmars]

Just I loved shell with this video

[@saveriobavosio5901]

Hi James, great video as always!😁 I have a question: when you return back to coffee list, you were forced to scroll down to refresh page; is there a way to refresh "parent" page automatically instead of do it manually?

[@JamesMontemagno]

I could have done it on "OnAppearing" most likely... I probably just need to update the code ;)

[@saveriobavosio5901]

@@JamesMontemagno thanks! I will try your suggestion as soon as I can! :D

[@billymartin6497]

Great video, James, but I can't seem to find how to Change the color of the Title/Text in a Shell FlyoutItem. How do I do it WITHOUT creating a DataTemplate?

[@lmora00]

Excellent video

[@duncancole1742]

I do like Shell but I do wish common UI/Nav patterns, like Login as you mentioned, where better supported.

[@darwinturingan5530]

Hello James, I'm just wondering why appshell file is not automatically or is it just not yet available on .net maui? by the way nice video again. Keep it up!

[@JamesMontemagno]

It’s just not in the templates yet but you can add it in. Still in preview :)

[@jfras2359]

I have been watching your video's to learn .NET Maui. When you use "await Shell.Current.GoToAsync(route)" from the mainpage is execution suppose to fall through the statement or wait for the route to pass back control?

[@moatasemkremed5395]

Hi James, How Can We Set FlowDirection="RightToLeft" for Flyout in AppShell !! Is this Posible?

[@sergiotardo]

Prism or Shell ? that's a question.... do you have any comparation about this two?

[@anandshindey]

Thanks for the video. Waiting for Shell to be included in MAUI. When will it be templated?

[@JamesMontemagno]

Not sure yet, but in a future release I hope, they are adding things to template when ready.

[@SpurgeonB]

Thanks

[@BrianTX541]

I love it. I want to do everything in Maui. Does anyone know if they plan to add a maui web app like you can do in Flutter?

[@sentrycod2373]

Well said man. Would maui shell have customizable tab layouts like xcts tab view?

[@JamesMontemagno]

Either would want to use community toolkit or github.com/roubachof/Sharpnado.Tabs

[@miami528]

I have a question. I define the FlyoutBackgroundColor in the shell. It works on android emulator. When I switch to WindowsMachine the FlyoutBackgroundColor is still white. How can I fix it?

[@ventionuxd6002]

just awesome

[@stoppanigiovannino]

Hi James, how can I programmatically raise tap event on screen with . Net Maui, Is there any essencials feature for this ?

[@JamesMontemagno]

You could add a tap gesture recognizer - docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/tap

[@ziomalxxz]

Hello, Do you know anything about migrating Sextans library (ReactiveUI view model based navigation library) to MAUI? Interestingly discussed material about Shell.

[@renaudgg]

Hey James, so did you "redo" the cofeeapp to be .NET MAUI or is it just "xamarin" im confused as how we could see the differences

[@JamesMontemagno]

I haven’t changed it to .net Maui yet, but the concepts apply

[@broadshare]

Nice recap

[@jobychacko712]

Should I use 'Shell' or is the 'FlyoutPage' is fine?... what is the difference? ( ). There is a 'Detail' with 'Navigation' in FlyoutPage... Please advice...

[@JamesMontemagno]

Depends on your app. I really like Shell and all the other things that comes with like I outlined. FlyoutPage is also fine, but is a bit messy to setup and use. Up to you and your app.

[@keithsummers1889]

I'd like to see some simple clarification about the difference between Shell created Flyout/Tabs/Navigation pages versus the Pages : FlyoutPage/TabbedPage/NavigationPage. Is the Flyout/Tabs/Nav just infused into Shell? Is it correct to say that full Pages of these types can NOT be used while in a Shell app (limited to content page only)? OR is it that Shell contains Flyout, Tabs, already? I'm assuming that a "Shell app" is any app that invokes the Shell inside it project hierarchy? This is just a murky area that needs a solid clarification so that a user can appreciate the philosophical design approach.

[@tofraley]

Great vid. I'm kinda confused why the shell is routing with url strings though. I'm a web dev, so I'm familiar with that. But I would not have thought a native app in dotnet would be using magic strings for navigation. Seems like you lose all that juicy type information for MyCoffeeDetail and coffee.Id, only to parse them back into a class and int object.

[@dpc4663]

Hi, is there a tutorial somewhere how to create flyout menu dynamically using DB list? Do I need to save Route and ContentTemplate values for each menu item in the DB? There is ShellItem, FlyoutItem and MenuItem, and I'm not sure which one to use for what in the Flyout page.

[@jdia.]

For some reason, when i have a flyout item with a tab, that has 2 or more tabs within it, the flyout page button doesnt open that one up. it only loads the single flyout items Edit: as your "equipment page" has multi tabs within each other. i have one FlyoutItem with a tab called "Home" and another FlyoutItem with a tab called "Messages", and inside Messages, i have 2 child tabs. Private Messages & Group Messages. Whenever I press either Home or Messages, both bring up Home page, even though the Home Page button is routed to HomePage, and Messages route to MessagesPage

[@dallasthornton2374]

Is there any way to customize the look and behavior of the Tab Bar and the Shell Content? Maybe I'm missing some way to embed other controls into it?

[@JamesMontemagno]

You could use something like github.com/roubachof/Sharpnado.Tabs to get really custom.

[@WarBorg]

nice video, but the fact that we need to use the Shell singleton class to do the navigating kinda hinders unit testing of the view models

[@JamesMontemagno]

They just added this in .NET MAUI P12!!! It is very cool

[@CreativeB34ST]

So basically Shell is to .NET MAUI what partially bootstrap is to web projects. A quick and easy way to set up an opiniated theme and navigation structure, and with the option to customize.

[@manasiter2002]

Hello James, can we list Wi-Fi near by using Maui

[@JamesMontemagno]

You would want to tap into native code such as WiFi manager on Android.

[@stephenmiller4948]

James, I have watched every one of your MAUI vids - they are all fantastic!!! But... There's always a but, isn't there?! I have copied your page and viewmodels almost verbatim, yet I cannot get the QueryProperty values to auto-populate... I there something else that has to be done? I am creating the nav URL like this: var mailboxUrl = $"{nameof (MailboxView)}?MailboxName={selectedFolder.FolderName}"; and execute it like this: await Shell.Current.GoToAsync (mailboxUrl);... In my viewmodel, I have decorated the MailboxViewModel class with this: [QueryProperty (nameof (MailboxName), nameof (MailboxName))] and have a property defined like this: public string MailboxName { get; set; }...... The MailboxName property never gets set so I must be missing something... Any words of wisdom>

[@stephenmiller4948]

I figured this out... It seems the QueryProperty can only decorate a content page or a view model which is the binding context of a content page.

[@stephenmiller4948]

With that said, the behavior works great for a mobile application, but what about a desktop application? When the page is navigated to, the page replaces the previous page in the shell and activates the Back button. What I would expect for a desktop application is for the page to be inset into the region within the master page (master and detail side by side...) This would be on par for how Regions work within WPF Prism... Is there a way to accomplish that?

[@JamesMontemagno]

Yeah, so what you can do is enable Flyout on desktop and use tabs on Mobile if you desire. We do that in the .NET Podcast app... github.com/microsoft/dotnet-podcasts/tree/main/src/Mobile/Pages see MobileShell and DesktopShell

[@masudulhoque1275]

Hi, Can you give some idea about, if Appcenter analytics and crashlytics have support for MAUI application? I tried integrating it in a MAUI application but Android it works fine but iOS it crashes (dll missing System.Windows.Forms).

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

[@JamesMontemagno]

You would use a fly out page if it is a few layers deep basically

[@davidjackson148]

@@JamesMontemagno But how would you do that with Shell. Looks like you have to do all the work up front and it kind of feels like its not aimed and deep and complex applications. I could be wrong. If you get some time could you perhaps do a video cos I think I'm missing something here. Keep up the MAUI stuff its awesome :D

[@cbradbaer]

Hi James, late comment, but I am implementing Shell with my new project. With shell there seems to be what can best be described as "pull to refresh" when swiping left or right. Any way to disable this? It gets in the way of other items on the page, such as CarouselView. Thanks!

[@JamesMontemagno]

Hmmmm I'm not really sure, i assume that isn't a Shell ting, just a .NET MAUI thing. I would ask on github.com/dotnet/maui

[@RajK09]

When we select a menu item from shell menu, it looks like frozen for a fraction of second. Is there any fix for that?

[@patrickhunger2336]

Hi James, I have created a shell and tested it on my Windows machine. When I use a page, I have a window with the standard Windows button at the top. (Minimize, Maximize, Close). When I use Shell, I don't have that anymore. Is there a setting I have to make to achieve it with Shell or do I have to implement these buttons myself?

[@JamesMontemagno]

Do you mean with .NET MAUI? There is a feature not complete yet in .NET MAUI + Shell you have to toggle this -> github.com/microsoft/dotnet-podcasts/blob/main/src/Mobile/Services/EssentialsExtensions.cs#L71 In Xamarin.Forms it should work just fine, but Shell was always a preview feature of Windows there.

[@rahul_salokhe]

how to disabled dotnet maui app shell page right swiping?

[@omyoubee7250]

hi plz I need the video for coffee solution from the beging

[@davissheive403]

Why is it so impossible to set the font on the shell tab titles?

[@bikashghosh245]

If I need to pass object from one page to another page , what should be your recommendations using Shell..

[@JamesMontemagno]

If you need to, you can use classic navigation with shell, however I recommend using parameters and creating a stateless app and load items from a database locally or light weight cache in memory.

[@Jad.abouzaki]

Thank you

[@rarepanda3766]

Hey James, any migration from Xamarin.Forms to MAUI using Shell on both Sides?

[@JamesMontemagno]

Well all your code will just come over and so will your Shell code -> checkout github.com/microsoft/dotnet-podcasts

[@LeeM0to]

Is there a way to stop Shell from reloading the content when a tab is selected? E.g. so your list remains in place where you were when you navigate to another tab and then return? Another great video as always.

[@JamesMontemagno]

I believe the team addressed this in the re-architecture of .NET MAUI and I thought maybe in a newer update of XF... i will have to check

[@JamesMontemagno]

Yeah, I just checked now and I believe that is fixed up.

[@LeeM0to]

@@JamesMontemagno Excellent, thanks for that. And thanks for all the great content. Keep it up 👍

[@williambyrne6855]

Closed caption @ 2:10 starts getting humorous. Mentions the benefits of URL instead of creating new sex, and then there's the mention of Donna Maui 15 seconds later. Not sure calling the framework "Maui" was the best choice, but Donna Maui definitely works for me 😃

[@JamesMontemagno]

Thought I caught most of the auto caption mistakes will have to update them and look closer :)

[@pavelkravchenko2810]

Shell overlays Windows's app buttons(__ [ ] X). Is it right behavior or am i doing something wrong?

[@JamesMontemagno]

I think they will be there regardless... hard to see what you mean via text. ping me on twitter

[@UzairAli001]

3:39 It took me couple of hours to know why my Xamain.Forms shell isn't working on MAUI. It would be great if you show how to make FlyoutItems dynamically currently I'm using some sort of a hack which requires at least one page added as a flyout item. The idea is to show navigation items based on permissions setting by an API

[@JamesMontemagno]

Shell was added into .NET MAUI a while back and we use it in the .NET Podcasts app. Take a look there ;)

[@ariesdane5876]

Dependency Injection is broke in Maui shell as of the current beta. Eg, navigation events to child pages doesn't support constructor injection. That really sucks.

[@JamesMontemagno]

Checkout Preview 12, they just rolled out the feature devblogs.microsoft.com/dotnet/announcing-net-maui-preview-12/

[@greeksinmars]

The only problem for me is freshmvvm not support shell ...😜

[@jespinalny]

Maui still doesn’t work on MAC. 3/3/2022

[@JamesMontemagno]

Checkout dev.to/davidortinau/installing-net-maui-on-macos-4mmc for install which I’ve outlined before

[@jhanifkara8552]

I am still confused. For some reason i feel forms is easier jeje 🤣😭

[@JamesMontemagno]

What questions do you have? Let me know :) Shell is just a feature of XF and .NET MAUI to provide additional structure ;)

[@ChrisOnoo]

Thanks a lot