Enhancing .NET MAUI Desktop Apps with Context Menus

are you looking to make your desktop experiences with.net Maui even better well some of the built-in controls directly in Donna and Maui really help you optimize the user experience and I'm going to break down my favorite one today so tune in [Music] hey everyone I'm James and right here on my YouTube channel I talk allabout.net Dot and Maui xamarin xamarin forms and just everything happening in the mobile and desktop space around.net now I recently came out with a video about the swipe view on Don Maui a great way of adding some real cool functionality into your mobile applications now some of you pointed out in my comments below uh that that doesn't really work on all desktop experiences so how do you make a better desktop experience for your users if there is no touch screen there is no swipe to do whatever well how can you create a better experience and if you're not using a swipe view this thing built into Dynam Maui really really helps build a great user experience so let's just go ahead and get into it okay so this is our coffee application this is what we've been building out it was a xamarin forms application now it's a down at Maui application and here I have all my coffees we have this nice little swipe view inside of here to do favorite and to do delete so when I click on this it does a little pop-up boom we're totally good to go now here this is running on Android this is like pretty much exactly the same if I was running it over on iOS as well now when I run this application on Windows like we have here let me go and make this a little bit smaller there we go we can see all my different copies in here grouped and if I go to try to swipe I don't have a touch screen I don't have a swipe anything on here so I can't just drag this over I guess I could probably do touch events and create different things on it's actually swipe the view but there's different interactions that mobile users are used to versus desktop users so in this case here what we want to do is optimize for that desktop experience specific with context menu controls basically basically think of them as right click controls when I right click you can hear me click kind of I want a context menu to pop up so we can do that inside of our application in fact you can add this into any control anywhere just kind of like the swipe you could add it anywhere as well so let's go ahead and do it the first thing we need to know with context menus is that we can add them to any control and that will be like the clickable control so what we can see is that we have the swipe View and the swipe view items here and we have our coffee card so what we want to do is add a context menu to that coffee cart so I'm going to go ahead and expand this out just like that all right now when I do that I'm able to add this special sort of fly out thing that's a ton of Maui team has I don't really know why it's called this but these fly out menu contacts menu things are are fascinating but basically what you do is you go and you say fly out base dot context fly out and what this will do is it'll give you the ability to go in and create fly out menu items so here I'm going to say menu fly out and then inside of it I'm going to create a menu fly out items okay and the first one here I'm just going to go and say text I'm going to say favorite and then I'll do another one here and I'm going to say delete perfect so if we look at it again let me go ahead and minimize some of these windows down we have a card whatever whatever object it could be a label it could be a button anything like that and this is going to be the coffee card this is going to then add on a context fly out and in this case it's a menu fly out in their fly out item menus either context menus that's what we normally would call them but I'm going to bring this back up and now when I right click let me zoom in here we can see that we have favorite and delete which is super duper cool I look at that Boop very cool now I can add some other things in between them too so if I wanted to I could do a menu fly out separator inside of here I'm going to save that here and now when I right click you can see there's this tiny little separator item in there let me zoom in really close you can kind of see It'll point out to it right there you can see it a little little menu in between now wherever I click on here notice that's where that is going to open right so it sounds like it's just like it's sticky to an XY pixel coordinate or anything like that but anywhere on the on the actual item is where it's going to do it so we have favorite we have delete and we're totally good to go cool and click on it I can do stuff now on top of this there are a few things so for example I could have a clicked event now here for example I could for all intents I almost put it on the swiped item invoked if I wanted to I'd create a new menu item here now uh this specific uh one here this menu flat item clicked if I go to the code behind we could see that it is going to be um exactly the same right so if we looked here at this code we could say okay well the swipe item here is a sender was The Binding context I could for all intents just really kind of copy this here and then right here I could say well this is actually going to be a menu fly out item there we go I'm going to make this async perfect now if I do that I have my click event and get the binding context which is my coffee and I should be able to get it now unless you have hotter reload is going to work in this instance when I create new stuff I don't think it's going to no so let's go ahead and reload this really quick and then we should get that clicked event inside of it and this would be like the easiest way to sort of pull this down right so actually getting this uh just clicked item event inside of here all right so our application is starting up perfect cool so now when I click on this hit favorite I get my pop-up favorite of coffee good to go right so there we go we get that favorite awesome now it's probably not exactly what you want to do so if we scroll up here we could take a look and see how do we do commands and command parameters now I mentioned this before if you wanted to you could just go ahead and get rid of this click and say command and then here I'm going to say binding now I'm binding to the coffee item in my collection view right so if you're in a list viewer collection view or something like that you're gonna be binding originally to the item not to your view model so if I look at my coffee over here let me go into my models we can see that I could I could bind it to the test Command right so if I wanted to I could come in and say let me do test command and here I could go ahead and save that right click favorite we get this break point test we're inside this coffee we can see here's our name coming in our image everything like that I could continue again okay so let's say we want to not bind to this test command but we actually want to data bind here to our view model which has this favorite call that passes in coffee how can we get reference to that well if we take a look at our swipe items here we can see that we have this relative Source data binding here so we have a command parameter and then a command here that is a relative Source ancestor type it's going to walk up the chain and then look for the coffee equipment view model and then it's going to go ahead and set the path here now for some reason I couldn't seem to get this data binding working with this ancestor view I don't know if it's because how the context menus work or something else but I'm going to go ahead and take a look at the GitHub and if it's not reported I'm going to report that back and hopefully that gets cleaned up soon because it'd be great to just reuse this data binding there but there's another way of binding and finding these sources in fact previously someone actually left a comment that said wow this is cool but did you know that you could just sort to change the source to be the page and set the binding there that way you don't have to walk up the chain with this crazy syntax and that actually works great here for the flyout items so here's what we're going to do is what we're going to do is change this to command parameter and just like I did before I'm going to pass in dot what's that going to do is going to pass the coffee to the specific command that I want to go ahead and create and have pass into it now to change our reference source we're going to want to go ahead and give our page a name so here I'm going to say x colon name copy page and I had already done this previously but this is basically allowing me to reference this in code later so I can say hey change the source of this binding to the page source and then specifically let me go ahead and grab that favorite command so let me go ahead and do that here so we're going to do is go down here I'm going to say command and then I'm going to say binding just like I did before so this isn't anything to do different I'm going to say binding I'm going to say Source just like I did before but I'm going to say x colon reference and this pay type I'm going to say coffee page all right so this is saying hey change the binding source to this page all right follow with me here so far and then I'll say path and then I have to say binding context dot favorite command because remember here in this in this case I am specifically saying use the source of the coffee page and then that could be anything on the page but specifically use the path of binding context dot favorite page so now our favorite command so now when I run this application what we're going to see is that this specific binding will reference the page and call into that favorite command whenever I click on it so I'm going to go here go here there we go right click favorite and just like that I've hit my command I have my coffee being passed in there it is and it's going to do a pop-up just like we would thought and there we go so there's multiple ways to get it which is kind of cool that there's so many different ways to sort of bind these all up and get it working based on the different objects that are in there okay there's a few more things that I want to talk about as well so if I go into this we can customize it in a lot more ways so we have this fly out separator that I talked about but there's other things on there as well so one thing that I can point out here is that there is specifically support for icons so there's an icon image source right so if I say icon I can see the icon image source coming up and then I can change that to anything that could be an image inside my application or specifically that could be a font so if we take a look at our fly outs here we can see that I have font awesome in here so I can actually change that here so let's go into my solution and I'm going to go into my app shell and as I scroll down we're going to see that I'm using this glyph here right so there's this font awesome this color in here and I'm going to use this font image source so there we go Okay cool so we're going to go back over into our page and what I'm going to do is for the favorite I'm going to say menu flat item dot icon source and go ahead and paste that in there now I'm going to go ahead and need to do one last thing which is give this thing reference to font awesome over here so I'm going to go back up to the top and I grab the font awesome namespace and I'm going to paste this up here one more time so I have access to it here and now when I go in we can see that I get the little coffee icon right there automatically let's look at that code one more time here so we can see that I have the menu flat item icon image source this using a font image source or it could be an image it could be anything that you want it doesn't have to be a glyph and this is using a specific color of dark and light mode here so I'm doing a static resource for the light mode and a dark mode here whenever the app Theme changes I'm in dark mode now and then it's going to specifically reference this font uh some icons and I have a whole another video on how to do that it's super simple and on my way I'll put links down below as well so it's pretty cool right so we can go ahead and spice that up a little bit we can do one more thing what if we wanted to have more options besides favorite and delete so let's say I wanted to come in and I wanted to do a menu fly out separator there you go one more of those and then what if I want to do a menu fly out sub item so for example what if I wanted to have an option of options all right so I could do that so here I'm going to say text and I'll say options there we go and now what I can do is I can just go ahead and add some more options in there I'll say option one you know option two option three option four permit I'm going to hit save here now this is a little bit different because we have two menu items with separators and then this Sub menu item the first thing will be called options which is what we're going to see in the menu and then four options underneath it so now when I right click we get favorite delete and then options and notice I now get four more options underneath them which is so cool so this is highly customizable enabling you to create these great experiences inside of your.net Maui desktop apps well there you have it that's an overview of how to use the contacts menu or fly out item menu thingies inside of Donna and Maui to add great functionality into your desktop apps this is going to work exactly the same whether you're running on Windows or you're over on your Mac you're going to get that great right-click experience to add those options well there you go let me know if you have any questions in the comments below I'll leave all the documentation links down there if you like this video at all make sure you give it a thumbs up I do these videos on my weekends and this one is a holiday weekend so I'm just recording this on my holiday weekend off so if you like this content be sure to like And subscribe and of course if you have any questions or comments or recommendations of other things you want to see leave them in the comments below that's gonna do for this video so until next time thanks for watching [Music]

Channel: James Montemagno

Views: 6,444

Keywords: context menu, windows 11 context menu, windows 11 old context menu, dotnet maui, .net maui, dot net maui, dotnet maui windows, dotnet maui totorial, dotnet maui context menu, james montemagno, .net, dotnet, dotnet maui mvvm, dotnet maui blazor, enable classic context menu in windows 11

Id: Ivj21a_jMAo

Length: 14min 26sec (866 seconds)

Published: Fri Jul 07 2023