>> 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]