>> Hi. I'm James Montemagno, program manager on the.NET
developer Community team. Today I want to show you how you
can integrate menu bars into your desktop applications
to make them world-class with.NET
MAUI. [MUSIC] Tune in. Hi everyone, I'm James, and today we're going to be
talking about how to integrate menu bars into your desktop
applications with.NET MAUI. Now what exactly is a menu bar? A menu bar is a bar that has
different menu items in it. Now if you've used any
Windows applications, you may have noticed that
these are integrated into the top of every
single application. If you're on a Mac,
these are going to be in the top status bar areas
with different drop-downs. What's nice about menu bars is
that they're very flexible, which means you're able to
have multiple sub-items, separators, and a lot more. With.NET MAUI, it's really easy to integrate these
into your applications. Let's create our very
first menu bar items. These menu bar items are
the ones that show up at the top inside of your navigation page or
in your shell navigation. Here we have a file, locations, and a view. These can be created
in both of these XAML and also inside of C#
and any content page. To create it, just like you
would a different toolbar items, you're going to use the
contentpage.menubaritems element. What this does is
it takes a array of different menu bar items that are associated with
that specific page. Every page of your
application can be dynamic and have
different menu bar items. Here what we've done is
created three menu bars with the texts of file
locations and view. Of course, you can bind that
to resource files so they're translated if your application
is in different languages. Additionally, I'll
show later how you can add icons into your
menu bar items as well. These are just the top
level menu bar items, and the idea here is
when you click on them, a menu comes down. Let's go ahead and now add
a few different items. Here we're going to add two items, refresh and change theme
under the view menu bar item. We call these flyout items
because they fly out when you tap on that specific
menu bar. Here we go. All you have to do is put in the
element of menu flyout item. Here inside of the menu
bar item itself, a view. You can add as many as you'd like. Here we've added two with the
texts of refresh and change theme. Pretty simple. Now in
addition to just adding them, you can also add separators. This is a nice way if you want to group the different
pieces of functionality. For example under Refresh, we might want to separate
that from Change Theme. There a different inherent actions that your users are going to take. Just like you, we added a
different menu bar items, we can add as many
separators as we want. Here we've added in a
menu flyout separator between the two flyout items, and just like that we have our
separator inside of our project. Perfect. There's a lot
more that you can do with menu bars, including sub-items. This is really great when you have an application that has a bunch of different complex functionality
that you want to group together. You don't want to clutter that one
different menu item drop-down. You may want to here, for example, I have a flyout option. Here under locations, we're
going to say change location, and you may have other
ones underneath that. But we have this little shove, this little arrow that points
in different locations. Again, we can define all of these in our code
behind in C# or F#, or in our XAML as well. Instead of adding a
flyout menu item, we're going to add a
menu flyout sub-items, and a sub item is going to have
a list of menu flyout item. We shift them around a little bit. The nice thing here is
that each menu bar item knows that it can take different
types of menu bar items, that separator, the flyout
item or the flyout sub-items. Here we give it some text, and then the menu flyout items
inside the list to display. Here we're going to display
Berlin, London, and Redmond. Perfect. Now additionally,
we can have icons. Here on our menu for
View of Refresh, we can go ahead and use
the font image source of the icon image source. Now what I'm doing here is I'm using embedded fonts or Font Awesome, to actually display a
glyph in a specific color. It will not only display our text of refresh or also going
to see that it will now display this glyph next to
it and you can of course use app theme bindings so that color changes dynamically with the
theme of your application. Pretty awesome. Next up
are events and commands. You want to do something
when your user taps on one of those menu bar
items. It's really simple. You just add a clicked event
to automatically register in your code behind that that
flyout item was selected. Now if you're using MVVM and
doing data binding to your XAML, you can also not only bind commands, but also command parameters. Here, for example, I'm
going to do a binding on the command to the
refresh command that's in my view model that will automatically get triggered
when the user taps on that. Finally, what I've shown so far is just what it looks
like on a Windows. But like I mentioned earlier, when you run that same
exact code on a Mac, you will integrate deeply
into the main menu system, those on the top of Mac. Here we can see File,
Locations, and View. Now notice, because
Mac applications have standard help in
Window and edit menus, those also show up there, so you need to take those into
consideration and of course, you can read through the
documentation and how to customize the pre-built ones
into every single Mac, and Mac catalyst applications. That's it. You can get
started today by going to dot.net/maui to learn
everything about.NET MAUI. I will put links in the short
notes below for everything that you need to know about getting
started with menu bars. Hope that you enjoyed this video. Leave comments below, and don't forget to click "Like" and subscribe for more videos right here on the.NET YouTube. Thanks
for watching. [MUSIC]
