Custom Flyout Menu in .Net MAUI

hey guys so I'm back with another video and in this video we are going to customize the fly out menu in dotnet Maui so I have simply created an empty project and I have simply ran it on Android emulator so in this video uh as you all know the fly out menu that left app drawer menus we are going to customize the layout of that left menu box basically so by default uh the fly out menu that is disabled in.net moving so if you go to app shell you can see there is this plan number seven shell.fly out Behavior disabled so by default this is disabled and it has three options disabled which we just saw the disable the fly out menu then we fly out and then we have logged so if we select fly out then you see this hamburger menu here and if you click on it it simply opens this flower fly out section and on clicking of outside of this it gets closed so this is the fly out then the third option is logged logged means open fly out uh section so it will be automatically open and we cannot close it so it is logged in open state and in this video we are going to use this fly out so that we have this fly out and we can open and close it so by default if you look we have one shell content here which points to home page and this fly out menu it also has this one item here which points to this home so how does it work by default the all the shell items direct shell items so fly out actually uses all these items as a menu in this fly out section so if you change the title for this let's call this menu 2 so it will show menu too and if we copy this one more time we can see menu three and so on so menu 3 then we will use many four so all these are menus whatever shell item direct shell items we have all these will be shown to this fly out menus now these are without icons let's add icon for let's say for third one so we can say icon and by default it has only one image let's check uh images.net underscore bot dot SVG so let's use this dot net underscore Dot dot PNG save it and it did not come dot net underscore bot yeah so maybe we will need to restart it let's restart so it's here let's see if it if I can came here I can came here so it will show icon like this and I should have added this to other items as well for now you have a second one it came so yeah if the shell contents if these has these icons it will show icons like this and if these shell contents do not have icons then it will simply show the title without these icons so this is the default Behavior so this is the default Behavior now first thing we are going to do we are going to add plyode item and fly out display options as multiple items so we are kind of uh going to group these items and it says ambiguous clouds because for one fly out items container the route should be unique for all shell content so I will change this simply one two and three so routes are different now and it's fine so let's continue and I'll need to run it again it's here foreign nothing has changed we simply group these so we can group these items we can Define our route to this fly out item it's kind of Base route so maybe we can categorize the items between uh inside this fly out section so maybe it could be all these are related to categories for instance maybe and these can be different different categories so the route it will make it will make categories slash main page category slash main page one like this so we can Define this route if we want it's up to us uh let's call it base route or parent [Music] so now we can customize the appearance of these these menu items so to do that we have shell dot item template and we can use data template for this and now it's Dot and mouse responsibility it actually provides us an object uh for this binding context so we can access the properties of this shell content this fly out item basically this title and icon inside this so first let's try we will simply add label text and we will use binding and title so let's try to rerun it and it's here yep it worked so you see the default layout that is not here now so it is now coming from this shell item template data template now we have simply defined this label so we are getting this label here so we can change the appearance of this we could apply all the properties we can apply for labels so maybe for example star let's start with uh maybe font size 20 text color let's try three Point wait want attributes gold so we could apply all the properties from label and for title it gives us title and for this icon it gives us let's use an image here or image we will use Source we will get this Source from binding and for this it gives us fly out icon and let's set the aspect ratio to aspect Bill and let's define height and width for now let's try 20 and width also 20 and because this data template it can have one direct child so let's remove this we could have for now let's we use horizontal stack layout and we have this thing we need to restart it let's restart it's here and yep it came right so let's add some spacing to this 20 yep and maybe let's move this image to the right corner of the fly out so we could use horizontal options and and it didn't went to end why so because it is does not have the high width okay maybe so we could customize it like this right or if you want to maybe change it to something else we could use whatever control we want we can simply use this and it will be here the same you can click on it we can go to that particular page that particular link so it is working fine as expected so first thing let's try to add some padding also so let's add padding 25 the and this is for per item basis so we can customize it whatever way we want we could customize it now I'm going to comment this out with your reference now we are going to see another approach so I simply comment it out it should move to the default State let's rerun it so it's here and this is first this was the default view so this is default now the next thing what we can do we can simply replace this complete content with our custom content so for that thing what we could do we could do shell dot fly out content now we can provide whatever we want so maybe some random text and it will show this some random text so now we can customize it we can provide whatever view we want maybe we could have some if the these items are Dynamic we could have some uh binomial some list or collection of those items then we could simply use this to dynamically bind those items we can use one collection view here with the item source of the dynamic content then it will simply display all those contents so we could provide our own data template and it will simply uh design provide that particular appearance to all those items so we could customize this now when we talk about this content so we have two more things okay for now let's pair this this is fly out content now this is fly out content so in this fly out content we have two other parts as well so this fly out content we could have three different parts so first one is shell dot fly out head let's add one label here multiple attached layout pattern so you see fly out header then this fly out content now the third part is footer we could have fly out further to Shell dot fly out footer let's add a label here for now label text and let's call it player putter only and this is fly out photon right let me Zoom it so you see this is fly out footer and this is fly out header and fly out content so now this is the simple text now we could provide whatever design we want whatever controls we want we could provide to this so let's try to customize this first thing for this fly out header let's use a grid here so create width Maybe I will use one profile icon type of thing then name in some Big Font let's try that okay so it will have basically two columns let's use column definition so Auto for image and Then star for name and in this first thing let's use image and Source we have a default image that we are using so let's use that only dot dot PNG respect fill and let's use height request for 50 and which request 50 and fine so this should be our column zero this is default but I like explicit definition so let's use column 0 here now for the name I will simply use label this will be our column number one text will be let's use my name Now by Prince then vertical text alignment center then font size 30 cool maybe 28 only and then font attributes bold and maybe text color kind of Gray maybe use let's use this color and let's add some padding to this grid padding 35 and it looks cool that it looks good so let's save it and now we have this and maybe uh okay so maybe we can have one border around this grid let's use border and for this border let's use background color and let's use three colors for now okay and let's use stroke thickness zero not gray maybe some light color uh e [Music] or maybe D yeah it looks okay not that good I'm not that good in design but at least we can simply distinguish these two right this is header this part this is the part of header this is content so we have customized this maybe we could uh use the rounded image for this or maybe first thing let's add some space to this maybe we could uh can we add spacing to this columns facing yes let's try 20 yeah it's good so it looks good so this is kind of profile name and profile picture so this is how we could design this fly out title now before going to content let's uh go to fly out footer so for flight footer also we could have whatever design we want so let's add horizontal stack layout for this let's try background color for now let's use gray only and for this horizontal stack layout we will simply use or maybe we are maybe we can we are just going to uh display that copyright thing so we can label with text let's say copyright prints and this is how it looks or maybe we can simply have this label only we don't need stat horizontal stack layout that we are going simply using a single text for this right yeah and we can Define background color directly to this it is Alice blue maybe this only and uh horizontal text options we are going to set it Center and let's add some padding from 10 and 0 sorry from Left Right Zero from top bottom 10. and we are good so footer is here header is here now let's go to fly out content so for this content also we can have whatever design we want so first thing if the contents for this flyout content if these are limited in size so maybe we have the items which could fit inside the single screen with a smaller screen then we can use those directly if we know the items could grow in size so we could use crawl view for this so let me show you crawl view for cloud content now I will simply use the label with some text maybe let's call this menu one only and let's add some padding of 50. single item and let me copy it multiple times so we cannot have multiple children inside scroll view so let's use vertical stack layout and let's paste these and now we can not see these and why so what is the problem here scroll view vertical stack layout vertical stack layout reaction so right okay what you can straighten layout let's use multiple options as start can we see it now and why so view maybe let's acknowledging 0 padding zero and vertical options cloud happened what am I missing cloud content scroll View what is the issue and with Sim single label and if we comment is out and add this label directly we can see it so what is the problem with vertical stack layout vertical stack layer um let me try to find it out oh so I think yeah I had to um I had to read on it so basically what happened uh when we added this vertical stack layout so it was not able to figure out the size the height and width for this one that's why it was not showing so now uh I'm going to copy it a couple of times and let's rerun it so it's here it's coming and if we check it yes you can see we have this scroll bar this is scroll View and if you look close into this scroll view this these items scrolled behind this header and behind this footer so head and footer are top of the we could say Z index and these items the scroll view it actually hides those items which are outside of the screen so I will just I just wanted to show you that we could use the scroll View so this was the simplest thing we could use maybe instead of these labels we could have a great view with some complex design with images labels with different points multiple labels all those things we can have or maybe we can have one collection view with multiple items the same way I told you for customizing the layout so maybe we could have those collection View and we could design those items using data template and collection view item template so for now let's maybe add one grid with the two rows not so much two columns only the same way we defined our header maybe we can Define the same way so let's use column definitions so we will have Image First then we will have some text then we will have one kind of icon so this thing now let's define it so first image with Source I we have only single image let's use that only not that part and last step bill write request 25 and this thing only and this is our column 0 then comes our column one and in column one we will simply give some labels or label with text this is my new item one before that let's add create dot column this is the column one with the text base maybe font size 16 and that's all menu item one then third thing let's use one enable again with column number two Great Dot column two and that's used this text for this thing right the last so you could see this let's add some padding to this grid so padding from left right let's add five and from top and bottom less than 10. okay maybe let's add 10 from all sides yep now uh column spacing let's say 10 for this one so we have these for this text let's use bold okay and let's scale this out to double or maybe 1.5 yep it looks okay so we have this menu item then we could copy it a couple of times this grid so this is for single item so we can copy it a couple of times to remove uh to show other items as well for example let's use this for my new item two so this is for 2 right so we could have multiple items now we are customizing this as per RNA now we would want to uh perform some operation when we click on this thing so we could simply use our gesture recognizers for this one for example for discrete let's use grid dot gesture recognizer and we can use tab gesture recognizers and we could use this tapped event and we can simply show whatever we found here so for now let's simply uh show dot current dot display alert and title is menu item that or message let's do this write down voice tagged from the custom player content then cancel button so okay and let's use this thing this is an async so we could use these things end of it here private facing white and this thing and let's rerun it so it's here let's see and we click open this if we click on item two nothing is happening if you click on item one it shows this because we added this gesture recognizer for item one only in real world applications you are going to have some collection here maybe collection View and on that collection view you could have uh tabbed or selection change event or maybe in data template you could have some different command so it will be dynamic basically what I'm trying to say so for now let's copy these a couple of more times so that it look good yeah at least many times and let's change this to uh menu item three menu item four my new item five menu item six and so on so we have these items nothing will happen on click of any item but if you click on first item it will show this so we have designed this uh two more things here so this icon this hamburger menu these three lines so this is the default fly out icon but we could change this as well how we can change this so there is a property we could say shell dot fly out or is that icon notice that fly off icon fly out icon we have fly out icon so we can change it but for now as you guessed we only have one image so we will use that on the dotnet dot dot PNG if you do this if you save this nothing is happening we need to rerun and it's here as you can see this image this menu icon basically on click of which the fly out content comes we can see it right so it's here now if you could see these are here also these home menu two menu three menu four because we had these multiple uh shell contents right so this is the default behavior of dot net Maui if one fly out item or maybe one tab bar if it has multiple shell contents it is going to show us these in tabs we could disable it maybe I can create one more video for all these tab options and all these for now let's just focus on these fly out items only so we change this and this is here now one more thing which I wanted you to show basically so all these are for now I am using the views for flyout header content and foot directly inside this but we could use separate content view for this also so what I mean we can simply migrate the fly out content or header or footer to their separate views how we can do this let's add one folder here I'll need to stop wait let's add one folder here add and folder let's call it controls you could name it whatever you want and in this we will add a new item that will be a DOT and Maui item.net content to view so it will be let's say we want to Simply migrate content and footer not header let's leave header here only to your reference so we could say we could name it whatever we want let's use or maybe let's call it custom fly out content okay and we need this one with sample so custom fly out content we have here now for this we can directly use we can cut this out from here let's copy it for now let's come here and we will simply paste that code in in this controls so let me comment this out for now or maybe before just run it first we will see the default then we will see our control custom control so it's giving us this error the tab gestures recognizer dot tabbed event this is not defined because this was defined there only so let's use this and let's get this from there from the shell so let's cut it from here or maybe let's leave it here also and let's come here go to this and use this here as well okay let's run it again it's here and for now this is the same let's comment this out display of content and it's gone so now it is using the default now what we are going to do we are going to use our this control our custom control so first thing we need to add the namespace of this so this Nexus inside this namespace custom light mode this is the name of the project the dot controls go to our shell item and add one name face here XML and nice and let's call it Ctrl so you could name it whatever you want so let's use controls from this one so we have this controls now what we can do maybe let me command okay let's do this only to Shell dot fly out content inside this we could use our control that is custom flyout content and you could see the same behavior right the only thing image is not here so maybe we need to Taylor need for that it's here and images are still not here why so what happened to images well let's check for these dotnet part okay because we did not specify extension I don't know why but it was working on app shell and not working in custom uh control let's see if it works so it's here no we don't have images grid column dot net code.png.netboard.png yeah it should work it should work in your PNG well maybe let's try that should work without extension it should work with PNG let's try to add SVG for this I'm not sure what is wrong with these let's try it again now couple of these grids has this images has no extension couple of has PNG couple of others has uh SVG so it's here let's see and nothing is working okay maybe something is wrong there is nothing on top of my mind right now so maybe if uh someone from you knows what is the problem maybe you could let us know in the comments below so the same way what we did for this content the same way we could uh use different uh controls custom controls for header the same way and we could do the same for this footer also so I think that's pretty much what I have let me change the name of this also so Titan and customize apply out many awakens okay so we have a little recap we have in app shell first thing we could enable the fly out using this fly out Behavior the default value is false and there are one more value logged so it will have this in open state for always but we use fly out so that we could control that when we should when we are going to open it when we are going to close it it's up to us the next thing we added couple of shell contents we grouped them using this fly out item then by default it shows the default UI so we could directly customize that layout using the Shell load item template and this shell dot item template we could use any data template and Dot and mouse provides us and binding context for this so we could use title and fly out icon and these values comes from these shell contents so this title and these icons your daughter NYU gives these items for us then we could break this fly out into three different sections header content and footer and we could provide the different uis for these three as well so for fly out header we could use shell dot fly out title and we could provide whatever view we want then we have this fly out content so we could provide any content whatever we want here and then we have this fly out uh footer so we could provide our custom footer for this particular thing so it will be stick at the end of this fly out uh section then we could uh have these uis here inside this app shell only or we could use different content views for this one so for example for this thing we have simply uh this is the cloud content UI template which we kept in app shell only then comes this fly out content for this we created a custom content view inside this controls folder and we added our UI here and from here we simply added the namespace for this controls and inside this plot content we simply use that control so that is a little recap so and yeah one more thing so the by default it gives us that hamburger menu those three lines to open uh the fly out menu fly out content flight section so we could override that image using this fly out icon property we could give our image so I have simply given this fly out icon.netbot.png the default image which we have so this image if you could see this one so that this was all for this video so do let me know in the comments if you like the video and like and share this video subscribe my channel for more awesome content and I'll be back with another video bye

Channel: Abhay Prince

Views: 14,994

Keywords: .net maui, maui, dotnetmaui, netmaui, howtonetmaui, flyoutmenu, customflyoutmenu, customflyoutmaui, customappdrawernetmaui, custom flyout .net maui, custom app drawer .net maui, how to customize flyout in .net maui, custom flyout menu in dor net maui

Id: qs1otgknDHA

Length: 44min 37sec (2677 seconds)

Published: Sun Dec 11 2022