Create a .NET MAUI Menu Bar on Windows and Mac with Ease

as a DOT net Maui developer I'm often building mobile apps but also desktop apps and there are tons of great features to optimize your desktop applications for Donna Maui now I've done a few videos over here on contacts menus and Tool tips and a few other things but today I want to talk about one of my favorite ones which are menu bars that's right an important feature of every single Windows and Mac application that you can easily access and done in Maui so without further Ado let's get into it [Music] thank you [Music] hey everyone I'm James and if you know me you know that I have a bunch of mobile apps but also a bunch of desktop apps too and some of my favorite things about building applications with dynamawi are spicing up those desktop applications and I may be saying well what does it mean to have a desktop exclusive feature why would I want that isn't supposed to be multi-platform to be everywhere well these platforms are different right mobile is different than tablets different than desktops and Dante Maui helps you optimize those as you go so today I want to talk about the menu bar you know that strip at the top of every Windows app or the thing that's always up there on every single Mac application when you open it up we can easily integrate those into your Maui applications so let's go ahead and take a look all right this is our my coffee Maui application that we have over here just have it running on Windows we have a nice little fly out here we have our application here now in a feature video recently I talked about how to add these menu flyouts or context menus that's what I like to call them basically being able to right click and then add these little items in here so here I even have these sum menus here which are really really cool right so that's nice now inside of down in Maui you have the ability to also add top menu bar items now this is really nice what I'm going to do over here is go to the top of the page there we go and I'm just going to say content page dot menu bar items now this is a little bit different you can't just take all of your menu fly outs and shove them into the menu bar because each of them are menu bar items but there's a lot of similarities we'll talk about here so what I'm going to do is I'm going to come in and I'm going to say menu bar item and I'm going to say text and here I'm going to say file we we know that there's almost always a file window and a help and an edit too so let's put a few of those in here let's do an edit edit and then let's do a window and then let's do a help and as I pretty much write these hot reload is kicking in as you can see them in the top right here we have a file edit window help which is pretty cool now I'm going to put things inside of this this is actually pretty cool so I could go in and when I want to click on these I want to do stuff right so all I got to do now is do a fly out a menu fly out item now this should look pretty similar because if you saw earlier so I just do exit here if I scroll down to the bottom and I just go ahead and look at these items well sure enough we have a fly out menu item the the down and Maui team said well the right click and the click here basically the same so let's have the same API because if you're right clicking or dropping down they're all menu bar items and they're fly out items to this extent so now we can see this little exit here that's pretty cool I can go ahead and add more of them right so I can say exit or I could say um save maybe save as now as I open this up we get all the items right there which is cool uh we can also do other things like maybe we want to have a menu fly out separator in there right there we go now if we go here we can zoom in really close you see that little separator there right that's cool I can do the same thing I'm just going to add more so it's like it's just top reloading I'm gonna say open there we go I'm gonna say you know uh new there we go let's add another separator in there bam that was pretty cool look at that it's quite amazing it's pretty pretty cool right now maybe I want to do multiple uh fly outs right I want to actually have Sub menu flies so we can do that as well so we just have been using these flyout items and again just like normal these actually have commands and command parameters now this is going to use the binding context of the page and this is super cool so in this instance we're using our main view model no crazy bindings anything like that if I just go in and say binding uh here I'm going to get all my normal ones so I could bind this to the the clear command for example and it's totally good to go it's great I can just go ahead and do that and we're good and no big deal there now let's say though that we want this to be a a sub menu underneath it so I actually want new to come out and have another menu so for example here you know window and then we have these like little arrows here that kind of pop out right so let's do that so I'm going to come in I'm going to say a menu fly out sub item and I'll say text I'm going to say new dot dot dot I guess I wouldn't be dot dot I'll say new okay and then inside of here I'm going to do a menu fly up item in here I'm going to say new project there we go I'm going to say I don't know new file new class new new right and now we get the little Chev we get the drop down we get everything that we want new project new things like that which is really cool in fact what's really neat is I can at this point if we really want to take all of this code that I put in here I'm going to go ahead and paste it under the edit but I'm going to go ahead and delete the binding here because this is binding to the coffee and doing other stuff there and now under edit I have my coffee I'm using a font image source icon so I saw the icon here so this is doing a little hot mug right there under favorite I have delete I have more options I have everything there you can easily build up these menus and it's the same exact code and logic right there that you have so boom boom boom that is really really neat and you can add commands to any of these items so again if you wanted to you can have a command and a command parameter on there and everything that you need so again you can also have a command on the sub item right so when you tap on this do something for example so you can easily access these menu items and do it there okay so this is all here but what if I go to another page so what if I go to the equipment page well the menu is gone well that's kind of a bummer right what if you wanted a global menu for your entire application so here's what we're going to do we're going to lift this entire menu bar out okay now it's gone we're gonna actually delete this completely it's gone completely I'm going to go into my app shell and I'm going to say shell dot menu bar items I'm going to paste those in there and now we have the exact same menu fly out that's here if I go into another page sure enough it's all there now of course you're going to want to double check your binding contacts and everything like that but as we swap around we now have the same exact menu right there all right there there you have it adding menu bars into your applications now I'm running this here on Windows which means it's going to be inside of my application and that's just how Windows applications work if you run this exact same application on the Mac it is going to be at the very top of the application model it's going to be all of them there so you want to go ahead and make sure that you test your application whether it's over there on Windows or on Mac catalyst so you get those menu menu bars up there hope you enjoyed this video if you did give it a thumbs up and a subscribe button because I put out new videos here on my YouTube all the time hope you enjoyed this definitely let me know if you're using menu bars and Tool tips and these other desktop features if you want more of these videos let me know in the comments below let's go do it for this video so until next time thanks for watching thank you [Music]

Channel: James Montemagno

Views: 5,965

Keywords: .net maui, .net maui tutorial, dotnet maui, menu bar, learn .net maui, .net maui getting started, james montemagno, dotnet maui tutorial

Id: -ckmz89vhrQ

Length: 8min 23sec (503 seconds)

Published: Thu Aug 10 2023