.NET MAUI - How to create menus for desktop apps

hi everybody Welcome to a new video about net Maui most people are probably using net Maui for mobile Development building apps for IOS and Android butet Maui can also be used for desktop apps and in this video I will focus on one thing that can be really important when you're building apps I will build a menu customized for desktop so everything I show in this video regarding the menu will only be visible on desktop you don't have to remove the code for mobile but it will only render a menu when you run it on desktop on Windows or on Mac OS so let's open Vis studio and I will show you how to create a desktop menu so here we have visual studio and when I'm recording this video I running Visual Studio inside of parallels so this is my Mac and I run it in incoherence mode so this is like a Mac window for me this video is not sponsored by parallels but if you're thinking about buying parallels and want to support this Channel please use the link in the video description so let's continue so here I have created the new net Maui project it's just from the empty template so we have a Content page here and we can run the app so you can see how it looks right now so we started here on our Windows machine so here we have the app and as you can see we don't have any menu but for this app I want to add a menu like I have here in visual studio with file edit view git project and so on and that is pretty simple to do with net Maui so let's do that so here on the content page we have a property called menu bar items and that is collection so we can add multi multiple menu bar items here so let's go and add a first one file for example because that used to be the first menu options in a menu bar like this so menu bar item text file just like that and now if we open up the app and you can see that we have added it but we don't have any content to it so we go and add that and for that we will use use menu bar fly out items so text new for example like that and now we can see we have a new Option here and if we want something to happen when we click on that options we can say click and tie to an event or we can bind it to command if we prefer to use that approach with data bindings so let's skip that for now and we can add another one and if we want this type of menu item as we have on open here that we can have more options we can also do that and in that case we use menu fly out sub items and text open for example and now we can add a menu fly out item item to that for example text open from comuter and we can do open from cloud like that now we have two options sub options for the open menu items just like that and we can also add a separator here if want to menu fly out separator and then we can add a last item Mena menu fly out item text exit so now we have one of those menu bar items and we can add another one so like menu bar items text edit for example and then we can continue to add more items like this so if we take a look now how it looks we have file we have edit but you maybe want to add some keyboard shortcuts or keyboard accelerators to this menu and as you can see I also call the project keyboard accelator because I want to show that so we can bind those menu items pretty easy to a keyboard combination so we can press contrl n for new for example and that is as I said really simple so we do that so then we go to the new Option here and we close post that one and then we use a property inside of menu Fout item called keyboard accelerators and here we can add a keyboard accelerator like modifier we can say alt command control shift Windows let's say control and key n then we can use that for new to prove that this work we will also add a clicked event handler here so we do that clicked and we can use that event handler that I've already created and we go to the code behind and we set an breakpoint here and then we run the app again and try it out and now if we open the file menu we also can see that we have an indicator here for the key accelerator so I close this menu and then I go and press contrl n and then we hit the breakpoint and we can do whatever we want so the last thing we will do in this video is show how this will look on Mac so I will open up the same project in visous studio code so here we have the same project but Open inous studio code on my Mac so then we go and see what the bug what debug Target we have so so I have my Mac as a debug Target then we can go and run this project so here we have the Mac App in dark mode because I have dark mode on my machine but as you can see we don't have any manyu options here because that is not how a Mac app work instead you have them up here and here we can see we have new we have open we have exit and some options that you always have there on Mac uh it seems like the separator is not working on Mac right now so hopefully that will be fixed coming version of net Maui but we have all the options here we have format view windows also default for all Mac apps and as you also can see we have the keyboard accelerator here so we can go and set the break point even here on Vis Studio code main page s CS we have the event hander here so set the break point there go back to the app and press contrl n and we will hit the break point so that is how desktop menus works with Maui it's pretty simple or what do you think if you like my videos please subscribe to the channel if you don't already do that and click the like button and we'll see you in next video bye-bye

Channel: Daniel Hindrikes

Views: 1,639

Keywords:

Id: Zlks1mUhweg

Length: 7min 55sec (475 seconds)

Published: Thu Nov 23 2023