Well, come back to a new episode of
.NET MAUI 101. In this episode, we're going to
talk about menu bars. So kind of like the main menus inside of your
Windows and macOS application. If you will follow me this way. Welcome back to your daily dose of .NET MAUI 101. I'm your host, Gerald, and in this
episode, we're going to look at menu bars. Now, the menu bars are kind of
interesting. Well, they're not that interesting. It's super easy to implement in
.NET MAUI. But what I always find interesting is the user experience
between Windows and macOS. So in Windows, it's kind of like more contained
within one window. So in your own window, you have the little menu bar and you
can click on it and you can go through the whole menu right there
and you can have sub items and all that kind of stuff. But on macOS, you
kind of like have this detached menu bar, right? The menu bar is
always at the top. And no matter where you put your window on the screen,
there will always be that menu bar right on the top and you can always find it
there. Both have kind of like their pros and cons. I work with both
Windows and both macOS. But do let me know in the comments
down below which one you like. But in either case, we're going to see
how to implement that in your .NET MAUI application. So here we are
in Visual Studio 2022. I'm going to show you this on Windows
today. But I assure do, if you take this code and you run it on
macOS, it will look and feel the well, the exact same way, but as it
should on macOS because that's how .NET MAUI works. It translates it to the
paradigms of the operating system that you're running
it on. So here we're going to see it on Windows. And I just created a new .NET
MAUI project which you can see right here. Disregard this line. This is
what I'm going to show you line by line in a little bit. I already prepared
the code, but otherwise we just have this simple content page with a ScrollView,
a VerticalStackLayout, an image of a cool race car
with a .NET Bot in it, label, label, button, right? So that's
the very simple new .NET MAUI template that we got right here. But even with this,
we can implement the menu bar super, super easy. So the one thing
that you do want to note is that you have to wrap it kind
of like inside a NavigationPage, which will happen automatically with
the new template because that's using .NET MAUI Shell. Else you want to make sure
that you're inside of a NavigationPage and then it will
automatically add the menu items to that navigation page level. So if
we expand this a little bit here, you want to
say, hey, ContentPage... This also works, of course, with other types of pages,
MenuBarItems, and we can kind of say, we
want to have this MenuBarItem. And you can
set this up like in all kinds of different ways, right, depending on
what kind of cool layout you want to do. And if you watch my videos about the
context menus, which I highly recommend you do, then you will see
some familiar stuff because we are reusing the same menu items right here. So
that means you can also have them show up kind of like in two different
places, but do the same thing. So we have the menu bar items that's kind of
like our container for the whole menu bar for this content page. And then we
have a menu bar item. So that's going to be our first level
of menu bar items. That's going to be the things that you're going to see
on the actual menu bar. That's the first thing that your users are going
to see. And then inside of that, we can have the kind of like submenu,
right? So we have the menu flyout item, in this case, just one item
count, which has the same clicked event as the button that we
see down here for this button, for the counter button. So whenever we
click this menu bar item right here, we are also going to
increment the button. So that all works. I just reuse that event. You can, of
course, implement another event. You can implement a command if
you're using MVVM. All that stuff just works. Then I have another
menu item. So we're going to see this text app and we're going to see
YouTube. And more typical scenarios are like File, I don't know, Edit, View, Help, I don't know those
kinds of menus, right? Like high level menus.
And inside of that, I have a menu flyout item hello. Which doesn't do anything,
but just to show you the concept of how things could
look and feel, we have this menu flyout separator, which have a very fine
line, or, of course, depending on the operating system that you're running
on. We have this fine line between hello and the rest here so that you can
divide it up into kind of like groups, if you will. And
then under that we have another sub item, this time where we have the
text: You want to... So here you can have this submenu within the submenu. It will all become
clear if I run it in a minute right here. But now we can have menu
fly out items nested inside of that and we will have kind
of like a drop down coming from that menu. So there is all kinds of
things, all kinds of flexibility that you can add to this
to make the menus work for your application.
So if I run this on Windows right now, you will see that very simple
template coming up in a WinUI application that we have implemented
right here. And you will see in the top left that we have our main menu. So if
I pull this together here with the example next to it, then we
have this app, right? So that's the thing. Right here
we have YouTube, which is the thing right here. And if I click on that app, you
will see this count which is the menu flyout item here. So if I
click on that, you will see that the button increments, right? So
I can increment it here or I can go to App Count and you can implement it.
You can trigger it like that. Now for the YouTube thing, if I
click that, you can see that. Hello. So again, we have here the
hello. We have the flyout separator. It is a little bit come closer to the
screen. You can see it, this very, very subtle separator right
here. But you can see we have these two groups. And then you have the
flyout sub item. You want to subscribe to my channel? Maybe
that's something that you want to do. Do it right now,
right below this video so you can subscribe to my channel. And we
have this menu right here. So that is how you can implement these menu
bars inside of your .NET MAUI application. You've just learned how
to implement menu bars inside of your .NET MAUI application. How does
that make you feel? Let me know down in the comments. And of course, free of
charge. You can now also run this code without any changes on macOS. And
there you will have the cool menu bar for your application as well. Now
what if I told you that you can also add shortcut keys to this so you
don't even have to touch the menu? You can have shortcut keys for all the
options inside of your menu. Go check out the next video that will pop up on
your screen to go to that one directly. Or check out the full
playlist of .NET MAUI 101 bits for all kinds of snippets. See you for
the next one.
