.NET MAUI Shell Basic Overview (Flyout, Tabs)

hello guys welcome to my channel in this video I am going to show basic overview of cell in.net mavi application so here I have created one sample project so when you create a new dotted Bobby project so you will find this app cell.jml file so by default dotting my application using cell template so here in a Cell uh here cell contained so when I launch the application so it's just navigate to main page so by default it's just displaying this page okay so here in a Cell template I can add multiple cell contain and whatever the cell contain is available first that page is going to launch first uh when I run the application so let me add here another cell content and that title I am just going to use different titles so we can identify and here you can also specify other page so right now I'm not going to create page I am just pointing to main page and I just change this root for fill in the application so when I run the app I am just going to navigate to main page and that title will be the dashboard okay so now here is showing me title as a dashboard and also this fly out icon is visible and here it's showing me two options like dashboard and home so on the selection of dashboard you can navigate to uh whatever the page I specify here in content template that page it's going to navigate and you can disable fly out Behavior by specifying fly out Behavior option here in a fly out Behavior you can select either lock fly out and disable so when I select disable then this fly out icon is going to remove and also like if you want to set some other fly out icon then you can just set here layout icon and in that just specify whatever icon you want so let me just see I already added some icon so I'm just going to use here home icon okay now let me reason the application so we will see this reflection okay so now you can see this dashboard icon here a fly out icon is changed same way I can all add icon here also self contain okay so I think I need to read and before that here also you can set fly out item so in a fly out item you can add either single cell contain or multiple cell contain okay so when I added here multiple cell containing fly out then here tab bar option also visible and multiple cell item will be here right now in a fly out option by default okay so fly out display option by default is a single item so when you see this property fly out display option so it's a by default as a single item that's the reason here it's showing me as a single item so let me add title so when I add any Title Here so now you can see this title here and in a single fly out item I have added multiple cell content so here that's all content is visible dashboard and Hope let me add another cell contain also so I'm just going to change this title to schedule and that will this will be the setting and also let me add two pages here in cell overview project okay so now here in data template for a schedule I will set content template as a schedule page and for setting I will set setting page okay now let me run the app okay so now here on the click of schedule it's navigating to schedule page and on the click of settings it's navigating to setting page and when I said here fly out display option as a multiple item so in that case here now it's going to display all the items and if you want to hide this option from tab bar then you can just set cell Dot tab bar is visible to pause so when I run the application again in that case it's going to hide this cell contained from The Tap bar okay so from here now tab bar is not visible and in apply out option it's a displaying flyout item okay so navigation is not working so I think that due to here I specify same rule on schedule and setting page so let me just change to schedule for setting okay so now navigation is working okay similarly you can add here another fly out item also and like here if you want something like this multiple dashboard option and another option that will display tab bar so that scenario you can achieve like this here just set as a single item and just remove now this all self contain outside of fly out option because we set here sell the table is visible to false so due to that it's not going to this display tab bar and when let me just set to true and let me show you like when I run the application so in this scenario it's going to display this fly out option also in Tapper and this plot option also in tab bar so if I take this contain out of tryout option this fly out item in that case now tab bar is only display for display out item okay so now tab bar is visible for this all options and when I select this dashboard option also here it's a displaying tab bar option so when I take this content out of layout option so in this scenario this tab bar is not visible so when I select any of uh option from here either dashboard schedule settings so it's not going to display tab bar but when I select this option let me just change it change that name so when I select option one so in that case it's going to display app bar foreign ER so for that you can just use cell Dot fly out header and in that you can set either image or any layout you can add here so let me just set image okay so here I have added fly out covered image so it's going to display like this similar way you can set fly out footer also putter you can you can okay so like this you can set footer panel also and if you want to format this all cell contain item means a fly out item then you can set item template formation also for that just you sell that item template that you you can specify like whatever the format you want so like in agreed I just want like this icon size will be 20 and remaining space for label like whatever the text dashboard schedule for that option so I can set that also so let me just set here image so image source will be the layout icon okay so I just said contact tribute in a bold format now let me run the application so now this all fly out item will visible in bold that item title will visible in a bold text format okay so it's visible in bold text and let me just set here create dot column 0 and read that column one so okay and here so like this you can format this cell item okay so you can you can form uh you can form a fly out item as you want using cell dot item template okay now let me show you how you can Implement tab bar uh without this fly out option so let me just comment how this all stuff okay so here you can use tab bar option so in a tab bar tag you can add multiple cell contains so that cell contain is going to display in tab format so let me run the application again so when you implement this tab bar in that case this fly out is going to disable okay so if if I click here then it's uh throwing exception because and we use tab bar in that case we cannot use this fly out option so I just removed the cloud icon and let me rerun the application okay so now this tab bar here is visible so whatever the cell content you add in a tab bar so it is going to display in tab format now if you want to add multiple tab in a one tab option then just here use tab attribute tab tag and in that just specify the cell contain okay and here let me just set title okay so let me run the application again so here in dashboard tab option now to self contain will be visible one is users and another word schedule option okay so here in dashboard option when I selected dashboard so user Tab and schedule tab is visible so simply you can add the people send here okay so whatever the set content I added here in a tab bar option so we're displaying here and in a one tab when I add multiple self contains so it's just going to display here on top of the page okay so here in dashboard now it's showing three tabs option and outside here is just a single Pages display okay so that's all for today I hope you like this video and thank you so much for watching it

Channel: Programming With Pragnesh

Views: 14,445

Keywords: .NET MAUI Shell Overview, .NET MAUI Flyout, .NET MAUI Tabs, Flyout, Tabs, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: E9b1Sun0ecc

Length: 21min 9sec (1269 seconds)

Published: Thu Oct 13 2022