Intro to Shell in .NET MAUI

in this video i will show you how you can use shelling.net maui to create your main layout of the app like tabs and fly out [Music] hi and welcome to another video about dotnet maui today i will show you how you can use shell in dotnet maui shell is something that was introduced with summary forms to make it easier to create the main layout of the app or the main navigation with tabs fly outs hamburger menus it's another word for fly out so today i will show you how you can use that with dotnet maui shell is in the default template it was not that in summary forms but now it is so this video will be very much showing things in visual studio so let's dive in there directly here i have my demo app it's just i have created by the default template.net new maui or via the templates in the create new project so here it is you can open the app shell file episode.saml that is created when you create a project so here we can see we have a shell content that in this case is a page the shell content has a properties that is content template that you can use to load the actual page so you use data template and then you point to that main page in this example and you need to specify the the namespace up here so in this case local but that name is something you can set by yourself so here is the main page it's just the regular content page but if you want to add a tab bar you can go back here and we write tab bar onto the tab bar we add a tab and we can set title home for example for the first tab we can set the icon home and the icons i've added here is in the images folder in the resources folder and it's an svg file important here is that build action is set to my image if you want to use svg files you can also use font icons with the tabs or in with shell in general but i have seen that are some problems with the colors on them it's not following the colors for the shell it will be the color that you specify i don't know if that is a feature or if it's a bug but i recommend you to use an svg file or png so you will get the correct one so then we can move the shell content inside of this first tab now we can copy it and we can add a second tab let's say list because i have an icon that is list and for now we can use the same content in there and then we can run it on an iphone and then it will look like this now nothing happened because i have the same content but we can change that if you want to so let's close the debugger and if we want to we can do like this remove the content template now we can add a content page directly here if we want to if we do like this it will load when the app starts if we do this with content template it will load when you go to the tab in this case it will always do that because it's the first step but if you have multiple tabs you can use content template for the second third and so on and it will not load directly so just add some content here a vertical stack layout and a label tab two just to see that content will switch so let's run it again and here we have the content switch okay if we want to add top tabs to page we can do that the only thing we need to do then is to specify shadow content inside of the tab multiple times like this home one home two home three and then we can run to see how it looks you can go here and now we have three tabs at top and all those colors is in the default template specified here in the colors.sample that you find in the resources folder so here we have the primary the light dark and so on but of course you can set up your own styling here if you want if we instead want to have a fly out we can easily add that what we need to do is to change this fly out behavior to fly out that is default so we can also remove it the property if we want to or locked if you want to always be visible but on a mobile device we don't want that let's set it to fly out now we will click create a fly out item and wrap a shell content inside of it like this we'll set the title to fly out one for example and let's try to run this so it looks like this on mac with that icon there if we run this on ios it will look like that without an icon but we can swipe if we want to have an icon we can easily add that by using a fl fly out icon and that's what icon we want to use list for example that we already have added the problem here right now is that we have a bug that this will not work on ios but instead on ios we can do like this or not only for ios it works on all platforms font channel dot fly fly out icon then we can use a font image source here if you want because that will work then we set the color to white size let's say 24 and the glyph we want to use i have imported a font file with the office fabric icons and i know one of this font icons is f505 and with when we define it ensembl we need to do it like this so add hash and x and then the code 505 i don't remember what icon that is but i know that is one of the icons available so we can do like that and then we can try to run it and now we have an icon here okay let's continue to add more items if you want to have another flyout item we can do that fly out to and if we want to have them more or less grouped we can do that too then we need to set fly out display options as multiple items and we can add let's say three of them and just do that so we can see the difference and run it again open it and now we can see that we have a line here between the fly item one and fly out item two and now we don't have this layout item one title specified here instead we have the sub uh items the shell contents that you specified here so if we want to add an item that should not navigate because you can see here this will navigate to page and close it and now it's same page and also you cannot see that we will be different but we can also add a menu item menu item and then we can have a set the command property if we have a view model that we can bind to right now we're not created any view models yet so we skip that and set as the title text hello item and then we can set the icon here also i can image source and then we set let's use the home icon and the same we can do for those we can also set an icon here and we can take list for that one okay let's try here we have them and here you need to bind to the command and handle what should happen when you press it okay if we want to add a header for example to the fly out we can do that then we will do shell dot fly out header like this and then we can add content label label text header and we can also add a forger if we want to of course you can place this at the bottom if it feels better but right now we add it in the top foot and now we can run it and here we can see here we have the header and we have the folder to make this look great you need to add some padding and margins stuff like that but this is the way you can add footers and headers with flyout in coming videos i will show you more how you can customize the flyout so make sure to subscribe to my channel because there will be more videos about shell flyouts navigation and other dotnet maui videos because that is what i will focus on now bringing you short dotnet maui videos that will help you get started with dotnet maui thank you for watching make sure to subscribe and like the video and see you later goodbye

Channel: Daniel Hindrikes

Views: 6,595

Keywords: dotnet, .NET, dotnetmaui, .NET MAUI, visual studio, app development, ios development, android development, mac development, cross-platform, apps, xamarin

Id: Fzchi1FOY9A

Length: 12min 0sec (720 seconds)

Published: Fri May 27 2022