Howdy and welcome back to another
episode of .NET MAUI 101. In this episode, we're going to talk
about context menus. So right click menu. Although are they really just right
click menus and only available on macOS and Windows? Let's find out. Hello again. Welcome back to another
episode of .NET MAUI 101. I'm your host Gerald, and in this
episode, we're going to talk about context menus. Now, if you think about context
well, if I think about context menus, I
automatically think about right clicking some menu appears. And that also kind of
implies that you're thinking about Windows or macOS. But the cool thing is, and
that's where the real power of .NET MAUI is. This also works on other
platforms where it kind of applies. So now you also
have iPadOS, which is basically iOS running on an
iPad or Android, which allows you to hook up pointer devices to
those tablets, whether it's Bluetooth or wired. And you will get a little
cursor there as well and automatically free of charge. The implementation
that you will see today, which I'll be doing on Windows, will also work on iPadOS
and Android where it's applicable. Of course,
there's something to remind here that for your UX most
people, I would think I would assume I don't have any hard
facts on this. I would assume that most people do not hook up a pointer
device to their iPads or Android tablets. So definitely take that into account
for your user experience. You might want to solve things differently. But in
this video, let's just quickly hop over to Visual Studio and see how to
implement those context menus. Here we are on my machine. With Visual
Studio 2022 open, I already created a new .NET MAUI
project, which you can see right here I'm running on .NET 8. At the
time of recording, this has just been released and has a little refresh
template with a cool new race car. So that's super exciting. But here I
already prepared the code for you. So the important bit is
actually here. So actually, let's just run the
application so you can see the new template and you know what I'm talking about.
And it's pretty simple, right? Like we have an updated image
right here with a race car. Hello world. Welcome to .NET Multi-platform App UI.
And we still have the button that increments all the
things. So that is great. Now let's close this one again. And
here in the image for the .NET Bot, I now have this nested node right here which is called FlyoutBase.ContextFlyout.
Now, I'll be very honest, this is not a super
intuitive name, so you're going to have to remember it or just
look it up with Bing or your other favorite search engine and you
will remember how to do this. So here FlyoutBase.ContextFlyout.
And this is the important part. You can nest
this basically inside of any visual element to gain a context
menu on the element that you want. And then
from here, you have all kinds of crazy options. You can nest all the things.
So we have this MenuFlyout, right? So a MenuFlyout, in this case
is for Windows, a little pop up thingy with the
context menus. For macOS it's the same, but for other platforms, it
might look different, but the functionality will still be the same because that's
how .NET MAUI does it. It renders it according to how it should work on
that operating system. Then inside of that menu flyout, you
can have menu flyout items. So here I just have a
Count one with a clicked handler that is hooked up to
the OnCounterClicked, which is the same one as the button down here
below. So whenever I click that button and it increments, this now calls that
same method because it's just an event that's being called and you
can trigger that same code. You also have the command right here,
so you can make it work with data binding, if that's what you want. But
now if we right click and do Count, it should also increment that button.
Then we also have other options to make it look a little bit
nicer. So we have the separator, which just have this little fine line
in the menu so that you can separate different groups of things,
which is pretty common in these types of menus. And here we have this
MenuFlyoutSubItem with which you can nest different
items. So here you can start nesting. So we
have this sub item which can have a text, but in itself, I don't think
it does anything. So we don't have a well, we actually do have a command
right here, so you can have that do something as well. And then we have
inside of that MenuFyoutItems with other texts and
commands. I didn't really set it up right now, but you can hook
that up yourself with the clicked and the commands. And what's really
cool, you also have like icons, icon, image source, so you can set up
icons for this, all kinds of crazy stuff to make this look cool.
The one thing that doesn't work for context menus is the accelerator. So if you look at the video for the
menus that are kind of like on top of the window, then you also
have accelerator keys and shortcut keys. These don't work for context menus.
They only work for main menus. Go check the other video at the end of
this video to learn more about that. So, here we have this. And if I
run this again on Windows, now if I right click the
image, because on Windows and on macOS, I have to right click on
something to get this context menu, then you will see this menu, boop, right
here. And we have this count. If you look real closely, you can see
this separator right here, which is the separator thing. And here
we have this submenu. You want to subscribe to my channel? Maybe that's
something that you want to do. Find the button down below. Not a context menu,
just a button down below. Click subscribe. So here we have it. And if
I click Count, you can see that it actually increments here. So
this is the same thing. Now if I right click here, count there, count here,
count there. And that is how to implement a context menu. Easy as that
in .NET MAUI. Well, this turned out to be a pretty
short video because it's just that simple to implement it. If you want to know
more about that menu bar that I mentioned, check out this video right
here. If you want to have more short bites of .NET MAUI 101 episodes, check
out the playlist right here. And I'll be seeing you for the next
video.
