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

today i'm gonna talk about shell an awesome shell of your application for donette maui and xamarin forms specifically gonna break down what is it why you should care about it and why i love it so much so tune in [Music] everyone i'm james and i'm back this time talking about shell a really important concept of both don and maui and xamarin forms it's a shell it's a shell of your application but let's actually go back in time here and talk about where shell came from and why i think you should use it in most of your applications and maybe not all of them well when xamarin forms first started the concept was simple you had an app and you had a page that was kind of it you could have different types of pages like a simple content page a tabbed page or a fly out page you can sort of rig them all together and sort of combine them up now when you navigated you had a navigation stack and you would push pages onto the stack or pop things modally or push things modally and you pass objects around but as applications got more complex and so did the operating system there needed to be a way of adding a structure sort of an opinionated way of structuring applications and what the team did is they created shell an opinionated way of creating a shell structure of your app that enabled you to do all sorts of things such as fly out tabs on the bottom tabs on the top and also do url based navigation and also respond to query sort of schemas to open your application and this was really nice because if you wanted to navigate 10 pages deep you could basically say navigate to and go to this url and then your application would respond because shell knew how to navigate based on the url just like a browser does like the internet does it's based on a url of the thing instead of just creating new sex so really your application could be stateless in a way which is really really cool which means if you're deep linking into your application it's really beneficial it also meant that fundamentally if fly-outs changed or ios or android windows created a new way of doing fly-outs or tabs the xamarin forms and dynamic shell could adopt to that user interface and be really highly customizable so let's take a look and what this looks like in our app so i created a brand new don and maui application and as of today in preview 11 that i have here when you create it it just creates an app so a standard app over here we have our name spaces of don and maui and our xaml namespaces here and what we'll see is that in our app class it just creates a main page equal to a main page this is standard a donna maui app and a xamarin forms app both have an application class the only difference is the program startup here so here for example it creates this class and sure enough it's using that app class now let's take a look at what a shell application would look like and i'm going to be using specifically the my coffee app that i used to build out an entire don maui and xamarin forms 101 series on right here on this channel so make sure you go find those videos i'll put links to them up there over there and down in the show notes as well so here is what my app shell looks like it is a shell so it's not a content page it's not a tabbed page it is a shell and specifically here we're using the xamarin forms namespace but if i change this to the done maui namespace and put it in an mli project it would be exactly the same because it's the same functionality there now this shell is used a little bit differently so for example in our code behind our main page is no longer main page it is the app shell and why is that important well that's important because the app shell defines the structure and the theme of your entire application it's quite beautiful so the first thing i want to point out here is that it automatically is able to react to themes that are changing here so for example here's the fly out background color i can enable a fly out disable a fly out i can do whatever i want but i'm going to use basic dark and light theme here in our resources we style every single page of our application and our tabs and our flyout items here what i'm doing is i'm adjusting the background color foreground color the title the tab bar background the selected and the deselected colors automatically using app theme bindings here and i apply that to the tab bar and to the fly out item which is quite cool if we take a look at this application we can see that it's actually relatively complex it has two tabs here on my main layout i have coffee and i have espresso i have top tabs for light medium and dark roast over here which is quite cool i also have a fly out with all the different sections of my application such as the my coffee application that loads my coffee i can click and add a new coffee and it'll pre-populate with some items here i can also have it adjust to light and dark themes all automatically including those top and bottom bottom tabs which is really quite nice if i go back over here to the light theme look at how the application responds if you're interested in how all of this is built check out the 101 series over there so let's take a look at it a little bit more in depth why i love this thing well one is everything is overrideable so for example right here every flyout item i have a visual state manager describing what the selected and deselected states look like so you can customize that look and feel right here inside of your application then the cool part here is that you get to define what your fly-out items look like all inside of your code so for example here what i'm saying is that in this first flyout use equipment and use a font image source for the icon then i'm going to have a tab of coffee here which has three pieces of content in it so here's the coffee with the coffee cup and then i have three pages light medium and dark down over here i have espresso which is just a tab with one item in it and automatically you can see that when it has multiple pages in a tab it puts the tabs on top so this tab has tabs inside of it inside this fly out which is really really cool so this flat item has two tabs and this one has three pages and this one has one the other pages are very simple they're just simple fly out items with a single shell piece of content which is lazily loaded on demand when i click on it which is really really cool so this means i can easily add all of my pages or dynamically add all my pages here and i don't have to do any of the navigation at all in fact if i show you the code behind for the app shell there's nothing there the shell itself handles all of the navigation for the main fly-outs and tabs automatically for me previously if you were using the built-in tabbed pages with the flat you have to do all sorts of different work to handle a lot of this it gets really really complicated it's just built in there's even flyout headers as well and footers and you can do a bunch of customization inside of the shell i just have the sort of default here but you can set that all up which is really really nice now let me show you something else that i love about shell which is navigation i talked about it earlier specifically stateless applications i think it's really where mobile applications need to go because you should be able to launch any page inflate the content now previously you would just pass data objects around but really that's really not the best way of creating a stateless application it's very stateful because if someone opens your application later it's going to kind of start at the beginning if they close it out you could reinflate and save the state of your application using shell which is really cool so let's specifically look at how to navigate using this thing so i showed a little bit earlier here when i hit add it actually opened this page up right here if i go in and i click on a coffee notice that that pushed it onto the stack with a back button all right so as i go through there's two different ways of opening this so let's first look at our coffee view model over here and the first one is add now this is really cool what i'm doing is i'm creating a query based route where i can pass different items into the page or the view model attached with it so instead of pushing entire new page i've registered a route called add coffee page and i do that right over here in my app shell so here's the add coffee page the name of add coffee page and the type of ad coffee page it'll lazily load that for me automatically but notice that i'm passing in a query parameter of name which is really really cool so when i go to this add coffee page over here what i'm going to do is have a query property that will automatically read that value for me and set the name property automatically that's really really cool so i've set it to mods so it automatically sets that name right there i don't have to do anything i have to set anything up to deserialize anything it's all there for me automatically but what about when i click on a coffee that's a really cool one too so over here what i'm doing is i'm going to the my coffee details page and i'm passing it the coffee d which is really cool all right so if i open up that my coffee details page i can also set the query parameter on the page itself and note here what i'm going to do is i'm going to grab the identifier i'm going to go to my database and get that coffee and set up the ui so now let's go ahead and check that out so here what i'm going to do is i'm going to come in and let's create coffee 2 for example i'm going to hit save let's pull the refresh here and now i have my coffee too i'm going to tap on it and i navigate into this page right there automatically and bind that information up now here's what's really cool too is back navigation if you look at this it's sort of like a terminal or command prompt i can say go to async dot dot and then i can go back here it automatically will do that now the difference here between modal and not modal is really really cool because if i come in specifically to the add coffee page you can control that with shell properties such as presentation mode so not only can i navigate via these properties here i can also set if it's modal if it animates if it doesn't animate automatically which i think is really really neat now the other thing i'll say here is that i've been navigating just one time deep what i could do is i could say hey not only go to my coffee page but go and create another coffee page and what this would do is it would work just like a url where it would create a my coffee page create another my coffee page and then pass the attribute down to that second page so again deep linking deep into the application over and over and over again which i think is really really cool as i think about how i structure my application using shell now to me i love that this gives my application structure it gives me guidance it gives me an easy way of theming from start to finish all of my tabs all my fly out everything from start to finish i think what's really nice that you can build very complex applications using very minimal code all with shell that's it now shell does add a little bit of sort of structure and some different things of sort of thinking about how you organize your application like what happens if you have a login page do you start with the shell where do you put that i have an entire video talking about login using shell and without shell two but i think the benefits outweigh any additional complications that may come from a standard new page navigating to page because i think shell just really simplifies things so much now that's not to say that i always use shell all the time when i'm quickly hacking on code and i want to get stuff up and running i go in i create a new blank application i just start creating pages and sometimes i find you know what i don't have flyouts i don't have tabs i just have like a few pages in this application and you know what that's going to work great for me and i do want to pass around those things it's a very you know simple or medium application but as my application grows shell gives you that structure to grow create advanced sort of ui and navigation and and add that complexity by providing simplicity and that's what i think is really cool about it so their shell from start to finish why it exists why i think you should care about it and why i love it i've used it in a bunch of my applications like island tracker which is an app for animal crossing for my recent snow park application i actually took the coffee application cloned it and built an application in just a few days with the beautiful sort of navigation that's all built in here and if you want to see a really cool example of net maui and shell together take a look at the.net podcast application let me pull that up right over here really quick all you got to do is go to github.com microsoft.net podcast and it's a full application one hundred percent built with donna maui and shell all in one if you take a look at this what i love about it when you go into the mobile part of it here you can see inside of the views oops inside of the sorry pages the mobile shell that's right here and we have tab bars and tab pages and there's icons and there's titles and shell content and all sorts of good things inside of here including setting things if they're visible or not so if you had an admin page or not admin page you could hide or show different pages of your application but as a great example of how to build nice complex applications such as this podcast application all using donna maui shell or if you're using xamarin form still like i am in some of my projects all still right there i hope that you like this video i like to break down this thing as far as why you should be using and what it is if you did like it give it a thumbs up i'd love your feedback are you using shell in your don and maui and xamarin forms applications let me know what do you think of it what should the team be prioritizing i'm sure they love your feedback too i also recommend and i'll put some links down to some really awesome videos from shane on the donna maui team who's done all sorts of crazy real deep dives into shell i simply love it i really like the real tweaking under the hood of it so definitely check those out i'll put those in the show notes below some different things from build and different xamarin conferences of the past anyways i hope that you liked this video if you did like i said give it a thumbs up subscribe to the channel of course i would love that of course we have a membership here thanks to all of our members i'm going to put all their names right here so they're forever in this video i really really appreciate it um helps the channel go i make all these videos in my spare time it's so much fun to talk about these different topics hope to hear back from all of you in the comments below for a great discussion and thanks for watching [Music]

Channel: James Montemagno

Views: 30,143

Keywords: .net maui, bottom tabs, dotnet maui, dotnetmaui, james montemagno, maui tutorial, montemagno, rust lang, shell, tabs, top tabs, url navigation, xamarin.forms, xamarin.forms shell

Id: dM4PhZAUhzU

Length: 16min 51sec (1011 seconds)

Published: Thu Jan 13 2022