.NET Maui Apps | How to create Flyout, Tab Bar and Tabs in Maui Mobile and Desktop applications.

hello everyone and welcome back to net skilled  up channel in this video we are going to talk   about how to create flyouts and Taps or tab  bar fly out and tabas are used and marry app   development for navigation if you create pages  and you want to navigate between these content   Pages you can use fly out or tab bars to navigate  between them and that is what we're going to have   a look today now all fly out and top bars are  have to be created in the app shell.xamer file   so when you create a new project and you go to  abstract example if you see you have this share   content page and that is where fly out and  sidebars or tab tab bars have to be created   so we have a default one and that's what you see  as a sell content so if I have a copy of this   and now I copy this and I paste it here if  I run this application the first one here is   going to be displayed this is the router's main  page now this is home so if you can change this   to you let's send this to customer now this  is home we have to share content here which   one is going to display now let's save this and  now let's run this application and see so let's   refresh run this and now let's see which one of  these is going to be displayed all right so you   can see that the first shell content page has been  shown here that's a customer where if you navigate   to the app share that example page you could see  that we have the fair share content and that is   the second one and the first one is shown so no  matter how many share content that you have in   your app share that example file only the first  one is going to set automatically as your home   page so let's talk about fly out fly out are  like sad bars they appear at the left corner   of the application of the mobile app and this left  corner up here that is it the icon over there when   you click on it you're going to have a lot all  your content pages that you have created and Link   into your application so let's have a look now to  enable fly out you can set it to enabled if you   want to create a new project and you go to the  Shell content you have the shell.flyer behavior   as disabled so you can decide to enable that so  enable this so you see we have fly out so when I   start to fly out it means you are enabling it and  as you can see from here it is enabled now if I   click on this you can see I have the customer page  and I have the two the other one that's the home   page so I have these two content um share content  as pages over here but they all refer to the same   page that is the main page so if I click on this  nothing happens but editors navigated to itself   okay so that is the fly out nowadays to organize  the fly out we have a way of organizing it by   putting it putting all of the share content  in the flyer tab so how do you do that   so we can do that by creating the fly out  item tag so let's cut all this from here   and let's use so let's cut this  well and we can use flat out item   so you can see we have fly out item here now with  this fly out item you can have a title so like I   said there's a title and uh this is gonna be let's  say this is a dashboard now dashboard you can have   um shell content icon but before that let's  paste the two short content that we have here so   we have to paste this now when you paste this so  let's create another page there now we have main   page so let's create maybe contact page so right  click on this let's create this page so add new   let's stop debugging and now let's add  new content to a new file dot net marry   now content page and now here you want to  create contact as page so the page that now   you have to pay this year so let's add another  one and this will be about us so this about us   so let's go to the share content now  in here we have three flyouts so let's   copy one and also and the other one and now  here we're gonna say that this is about us   and now we have contact us so the routing you  can copy this where it should navigate to then   let's copy about us let's paste it here and that  is the home so we can maintain the home and that's   the main page here so when you save this and  now let's run this and see so aside from doing   this defaultly when you create flyout item it  is set as a single item so but here you see we   have two or more sure content here so in order  for us to enable the whole fly out well we have   to set build that behavior to as multiple items  so how do you set it you're going to use fly our   display option and I reset it to as multiple items  meaning we have two or more shell content here now   where this share contents you you can  specify um shot icon so you can say icon then   .net bot that's PNG so let's say this our icon so  let's copy this and I'll paste it here and paste   it here too so this means that you can specify  an icons now let's run this and see alright so   you see that the app is now rendered and you can  see we have the fly out here but unfortunately   we see we have the same button displayed as  a tab bar although we did not specify the tab   bar but we have it here when you click on this  you see we have the icons and also we have the   time bars over here now I can decide to click  on this and I get as a contact as and this also   gets us to the about us so we can change this  so this is contact us and we can have so you   save this and now you can see they've changed now  so customer now this customer let's set this as   home so we have home we have contact us and  we have about us okay but how can we just   um hide this because we have this fly bar that's  the fly out over here so how can we hide this we   can do that by setting up so shell dot stop  visible so we can set that we can set this to   false now when you set this to false and now save  this this sidebar is going to be off so as you can   see the cell dot tab bar is visible and I reset  this to four so when we restart the application   let's see this number is going to be hidden and  this the fly out is going to be there so let's   restart this so as you can see the top bars are  off we have the the sidebar and that is a fly   out the other as you can see from here now aside  from this you can decide to add photo and header   to this sidebar so you can have the header you can  have the photo right here let's find out and see   so here we can specify so shell Dot that  is fly out header so with this header   you can even specify an image and now the  source will be so let's use.net bot dot PNG and if I save this you see we have the head  over there and we can also specify the footer   so we can set the weight size  to maybe a 150 and let's say 100 so that is 100 so that's the photo and  we cannot we can write Benet as maybe   header so with this we can just grab this  and now we can use vertical stack layout so this is the image and beneath  the image we can have a label   and this label let's say this is test you  can say yes you see that this fly out header so fly out header and that is what  we have now let's set these two Center so horizontal test align reset to Center and  let's see good so that is the header now we   can do the same thing and set there for  tattoo so to set the photo let's grab this   and we can now paste the same thing here and instead of header we now go for footer and within the photo you can also specify this  so when we save this unless as you can see we   have the fly out photo over here and that's  also the fly out photo we have the vertical   layout and we have the image also display okay  now let's restart and see what's gonna happen here   okay so it is even there so that is the  footer here and let's change this to uh photo   so we have the photo indicated over  here okay so aside from this what I   think that we can also do we can specify  short templates or sell item template   so we can decide to arrange this well so  maybe we will decide to do something like   a cell dots let's specify an item template  now within the item template we can have our   data template and within the data template we can  have our grid and here the grid so let's specify   grid and we can say that here we want column  definitions image let's pass image as 30. so   we can say that 30 Then star and let's specify dot  70 star and also with the rows now we have three   second NCAA 20 specify row definitions and now  we're going to say um star star and star because   yeah three okay so in here this what we can do  we can actually use frame here so let's see if   frame is going to work for us so with this Frame  that is the first one and we have to set it as you can even say this the first one here as   horizontal stack layout so  horizontal stack layout and with this let's see so in here this is grid so this  is grid dots row and here it is zero if you   don't specify it it is going to work as well  so what we're going to do here is let's paste you can decide to specify the  this that is the home page and   the icon so here this is what you're going to do let's specify the image and now with this image  we are going to say we're going to bind the source   and we're going to say bind dot fly out icon so fly out icon and let's also specify the  label and this label we're going to say test   and bind into title now with this the icon  let's see now this icon resets the request   plus sets which request to 50. and  height also to 50. so let's save this   and unless okay so you can see we have the  icons here and this we can even specify spacing as 10. so we're going to space this up  and now with this grid we can have row   spacing and column spacing so we have row spacing so row spacing you can set this to 10 and you're  going to separate them and we're gonna have also   column spacing you can set this to 10 as well so  aside from this we can have maybe a borderline   like you see we have this and that we can have a  but I can have a box View and and so forth so we   have three here now this one two three okay so  we can have a box view to have a line separated   so you can customize it the way as you want in  your fly um fly out since you have the header   deforter and you have the content here with the  having of shell.item template you can modify it   as a way that you want okay now aside from this  let's talk about Taps so tabs over here so how   is it possible can we do tabs yes of course we  can do that let's see now let's comment all this or we can leave in let's comment this one here  you have the cell we have shared template and we   have a fly out item we have a cell item template  and everything over here now down here let's see   what we can do with the tabs so during the times  you have to pass in the top bar so this top bar   and now with this tab bar as we have let's  go in there and then grab this content here let's close it and our last space in between  the top bars so let's save this and now this   have to appear over here the same thing so  let's format this as well and we'll restart so after this let's restart the  application and see so let's restart so now we have this done but you see the tabs  are not displaying because we set this tab   visible as false so let's clear this now let's  save this you must now have the tabs over here   so let's restart and see all right so you see  we have them appeared and I can click on this   to navigate as well so that is the tab and this  is the fly out flyer tether photo these are the   contents we have our tabs and also over there now  you see in some apps you can have tabs on top here   these are tabs on top here these  are tab bars so how can we do tabs   on top here let's have a look at  this so let's try to grab this so let's try to grab all this the  first two or even this three and here   this is what you're going to do so first of  all we have to create tab so let's create tab   now let's paste within the tab let's  format this row so we have the tab and   this let's save this and this is going to pop  up on top of the page here so let's restart all right so you see the app is ready now  but these Tabs are not showing the reason   is we have our flyout sharing so our  flat out and also these tabs can show   so one must be off so if this is off that  one will be on and if this one is on that   will be off so let's see now all our  flowers over here let's comment this so this I fly out now let's comment this fly  out Ctrl K and C let's save this now you see   we have our tabs over here now aside from having  these tabs you can see there's no title here so   that's the first step now let's so let's add  title and now this is home and let's add icon so icon you're gonna say does this dot net  but so as soon as you can see we add it we   have the icon here now if I click on this you can  navigate to contact us and about us and also we   can go to all the tabs over here as well if I  click on this home you can see nothing happens   all this nothing happens so in case I want to  get rid of this and I'll create the next steps   then I'm going to clear all this I'm going to  click all this then I can make a copy of this then I'll paste it one and now paste  it two now with this you see we have   the two now let's make some edits  here so let's format this well now let's do same to this as well so now we see the first tab here we have  the name identified already and let's go   to the second tab so instead of  home maybe is going to be like   product and within the product  we can have maybe um service um let's say we can have something  like purchase now let's go to the   next Tab and now here it's going to be  for services and now with this services we can have maybe location as the first one now  let's save this so let's click on the second one   that's the product now we see we have pages  when you click on this service you can see we   have location and now this flight layout piano is  not working it is because we set a flight layer   to now let's disable that so disable this save  this and now it is off so we have this working   perfectly and all these are tabs these are  tab bars and what went off is that's a fly out   okay so I believe um with this fly out creating  a fly out or a sidebar and creating tabs and uh   top bars it is clear now so that is it  I believe you'll be using this in your   application because they help navigate us  to content Pages easily thank you guys for   watching this video check out playlist we  have a lot of lessons over there for you   both Blazer and Dot net Mario application and  the other they are also informative lessons   too thank you so much for watching and I'm  going to catch you up in the next video

Channel: Netcode-Hub

Views: 22,843

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, desktop app, create app, android, apk, applications, MSIX, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key, context menu, navigation service, nivigate trough content pages using navigation service, How to use Font Awesome in NET MAUI Mobile and Desktop applications., fontawesome, icons

Id: Ru1G3-_G2Qs

Length: 20min 59sec (1259 seconds)

Published: Wed Aug 09 2023