Are you looking to make your desktop experiences with .NET MAUI even better?
Well, some of the built-in controls directly in .NET MAUI really help
you optimize the user experience.
And I'm gonna break down my favorite one today.
So tune in.
Hi everyone.
I'm James, and right here on my YouTube channel I talk all about net,
.NET, Maui Xamarin and Xamarin forms and just everything happening in the
mobile and desktop space around.net.
Now, I recently came out with a video about the swipe view on .NET Maui.
A great way of.
Adding some real cool functionality into your mobile applications.
Now, some of you pointed out in my comments below, uh, that that doesn't
really work on all desktop experiences.
So how do you make a better desktop experience for your users?
If there is no touchscreen, there is no swipe to do whatever.
Well, how can you create a better experience?
And if you're not using a swipe view, this thing built into .NET Maui really, really
helps build a great user experience.
So let's just go ahead and get into it.
Okay, so this is our coffee application.
This is what we've been building out.
It was a Xamarin Forms application.
Now it's a down at Maui application, and here I have all my coffees.
We have this nice little swipe view inside of here to do favorite and to do delete.
So when I click on this, it does a little popup.
Boom.
We're totally good to go.
Now hit here.
This is running on Android.
This will look pretty much exactly the same.
I was running it over on iOS as well.
Now, when I run this application on Windows like we have here, let me go
ahead and make this a little bit smaller.
There we go.
We can see all my different coffees in here grouped, and if I go to try to swipe,
I don't have a touchscreen, I have a swipe anything on here, so I can't just.
Drag this over.
I guess I could probably do touch events and create different things on it to
actually swipe the view, but there's different interactions that mobile
users are used to versus desktop users.
So in this case here, what we wanna do is optimize for that desktop
experience specific with context menu.
Controls, basically.
Basically think of 'em as right click controls.
When I right click, you can hear me click kind of.
I want a context menu to pop up so we can do that inside of our application.
In fact, you can add this into any control anywhere.
Just kinda like the swipe.
You could add it anywhere as well.
So let's go ahead and do it.
The first thing we need to know with context menus is that we can
add them to any control, and that will be like the clickable control.
So what we can see is that we have the swipe view and the swipe view items here.
And we have our coffee card.
So what we wanna do is add a context menu to that coffee card.
So I'm gonna go ahead and expand this out, just like that.
All right.
Now when I do that, I'm able to add this special sort of fly out
thing that the ton at Maui team has.
I don't really know why it's called this, but these, these fly out menu
context menu things are, are fascinating.
But basically what you do is you go in and you say, fly out base.
Dot context flyout.
And what this will do is it'll give you the ability to go in
and create flyout menu items.
So here I'm gonna say menu flyout, and then inside of it I'm gonna
create, uh, menu flyout items.
Okay?
And the first one here, I'm just gonna go ahead and say text.
I'm gonna say favorite.
And then I'll do another one here and I'm gonna say delete.
Perfect.
So if we look at it again, lemme go ahead and minimize some of these windows down.
We have a.
Card, whatever, whatever object.
It could be a label, it could be a button, anything like that.
Uh, and this is gonna be the coffee card.
This is going to then add on a context flyout.
And in this case it's a menu flyout.
And they're flyout item menus a, they're context menus.
That's what we normally would call them.
Lemme go ahead and bring this back up.
And now when I right click, let me zoom in here.
We can see that we have favorite and delete, which is super duper cool.
I look at that.
Boop boop boop boop.
Very cool.
Now I can add some other things.
And between them too.
So if I wanted to, I could do a, uh, menu, fly out, separator inside of here.
I'm go ahead and save that here.
And now when I right click, you can see there's this tiny
little separator item in there.
Lemme zoom in really close.
You can kind of see it.
I'll point out to it right there.
You can see it.
A little, little menu in between.
Now, wherever I click on here, notice that's where that is going to open, right?
So it sounds like it's just like it's sticky to an XY pixel
coordinator or anything like that, but anywhere on the, on the actual
item is where it's going to do it.
So we have favorite, we have delete, and we're totally good to go.
Cool.
I can click on it.
I can do stuff.
Now, on top of this, there are a few things.
So for example, I could have a clicked event.
Now here, for example, I could, for all intents, I almost put
it on the swiped item, invoked.
If I wanted to, I would create a new menu item here.
Now, uh, this specific, uh, one here, this menu, flyout item clicked.
I go to the code behind, we could see that it is going to
be, um, exactly the same, right?
So if we looked here at this code, we could say, okay, well this swipe item
here is a sender, was the binding context.
I could, for all intents, just really kind of copy this here, and then
right here I could say, well, this is actually going to be a menu fly out.
Item.
There we go.
I'm gonna make this async Perfect.
Now, if I do that, I have my click event, I get the binding context, which is my
coffee, and I should be able to get it.
Now let's see if, how Reload is gonna work In this instance when I create new
stuff, I don't think it's going to, no.
So let's go ahead and reload this really quick, and then we should
get that click event inside of it.
And this would be like the easiest way to sort of pull this down, right?
So actually getting this, uh, just clicked item event inside of here.
All right, so our application is starting up, so.
Perfect.
Cool.
So now when I click on this hit favorite, I get my popup favorite of coffee.
Good to go, right?
So there we go.
We get that favorite.
Awesome.
Now it's probably not exactly what you wanna do.
So if we scroll up here, we could take a look and see how do we do
commands and command parameters.
Now, I mentioned this before, um, if you wanted to, you could just
go ahead and get rid of this.
Click and say command.
And then here I'm gonna say binding.
Now I'm binding to the coffee item in my collection view, right?
So if you're in a list view or collection view or something like that,
you're gonna be binding originally to the item, not to your view model.
So if I look at my coffee over here, lemme go into my models, we
could see that I could, I could bind it to the test command, right?
So if I wanted to, I could come in and say, lemme do test command, and
here I could go ahead and save that.
Right click favorite.
We get this break point test.
We're inside this coffee.
We can see here's our name coming in, our image, everything like that.
I could continue again.
Okay, so let's say we want to not bind to this test command, but
we actually want a data bind here to our view model, which has this
favorite call that passes in coffee.
How can we get reference to that?
Well, if you take a look at our swipe items here, we can see that we have this.
Relative source data binding here.
So we have a command parameter and then a command here that is a relative
source ancestor type, and it's gonna walk up the chain and then look for
the coffee equipment view model.
And then it's gonna go ahead and set the path here.
Now for some reason I couldn't seem to get this data binding
working with this ancestor view.
I don't know if it's because how the context menus work or something else,
but I'm gonna go ahead and take a look at the GitHub and if it's not reported, I'm
gonna report that back and hopefully that gets cleaned up soon because it'd be great
to just reuse this data binding there.
But there's another way of binding and finding these sources.
And in fact, previously someone actually left a comment that said, well, this is
cool, but did you know that you could just sort of change the source to be
the page and set the binding there?
That way you don't have to walk up the chain with this crazy syntax.
And that actually works great here for the fly out items.
So here's what we're gonna do, is what we're gonna do is change this to command.
Parameter and just like I did before, I'm gonna pass in dot and what's that
gonna do is gonna pass the coffee to the specific command that I want to go ahead
and create and have pass into it now.
To change our reference source, we're gonna want to go ahead
and give our page a name.
So here I'm gonna say X colon name, coffee page.
And I had already done this previously, but this is basically allowing me
to reference this in code later.
So I can say, Hey, change the source of this binding to the page source.
And then specifically, let me go ahead and grab that favorite command.
So lemme go ahead and do that here.
So what we're gonna do is go down here.
I'm gonna say command, and then I'm gonna say binding just like I did before.
So this isn't anything too do different.
I'm gonna say binding.
I'm gonna say source just like I did before, but I'm gonna say
X reference and this PA type.
I'm gonna say coffee page.
All right, so this is saying, Hey, change the binding source to this page.
All right, follow with me here so far, and then I'll say path.
And then have to say binding context dot favorite command.
Because remember here in this, in this case, I am specifically saying
use the source of the coffee page and then that could be anything on the
page, but specifically use the path of binding context dot favorite page.
So now our favorite command.
So now when I run this application, what we're gonna see is that
this specific, um, binding.
We'll reference the page and call into that favorite
command whenever I click on it.
So I'm gonna go here, here.
There we go.
Right click favorite, and just like that.
I've hit my command.
I have my coffee being passed in.
There it is, and it's gonna do a popup.
Just like we would thought, and there we go.
So there's multiple ways to get it, which is kind of cool that there's so many
different ways to sort of bind these all up and get it working based on the
different objects that are in there.
Okay.
There's a few more things that I want to talk about as well.
So if I go into this, we can customize it in a lot more ways.
So we have this Flyout separator that I talked about, but there's
other things on there as well.
So one thing that I can point out here is that there is
specifically support for icons.
So there's an icon image source, right?
So if I say icon, I can see the icon image source coming up, and then I
can change that to anything that could be an image inside my application.
Uh, or specifically that could be a font.
So if we take a look at our, uh, flyouts here, we can see that
I have font awesome in here.
So I could actually change that here.
So let's go into my solution and I'm gonna go into my app Shell, and as I
scroll down, uh, we're gonna see that I'm using this glyph here, right?
So there's this font Awesome.
This color in here, and I'm gonna use this font image source.
So there we go.
Okay, cool.
So we're gonna go back over into our page, and what I'm gonna do is for
the favorite, I'm gonna say menu.
Menu, flyout item dot.
Icon source and go ahead and paste that in there.
Now I'm gonna go ahead and need to do one last thing, which is
give this thing reference to font.
Awesome over here.
So I'm gonna go back up to the top.
I'm gonna grab the font.
Awesome na namespace.
And I'm gonna paste this up here one more time so I have access to it here.
And now when I go in, we can see that I get the little coffee
icon right there automatically.
Let's look at that code one more time here so we can see
that I have the menu fly out.
Item icon, image source.
This is using a font image source, or it could be an image.
It could be anything that you want.
It doesn't have to be a glyph, and this is using a specific color of.
Dark and light mode here.
So I'm doing a static resource for the light mode and a dark mode here
whenever the app theme changes.
I'm in dark mode now, and then it's gonna specifically reference this font.
Awesome icons, and I have a whole nother video on how to do that.
It's super simple.
And on Maui, I put links.
Down below as well.
So that's pretty cool, right?
So we can go ahead and spice that up a little bit.
We could do one more thing.
What if we wanted to have more options besides favorite and delete?
So let's say I wanted to come in and I wanted to do a menu, fly out, separator.
There you go.
One more of those.
And then what if I wanna do a menu, fly out?
Sub item.
So for example, what if I wanted to have an option of options, right?
So I could do that.
So here I'm gonna say text and I'll say options.
There we go.
And now what I can do is I can just go ahead and add some more options in there.
I'll say option one, you know, option two, option three.
So, Option four.
Perfect.
Now I'm gonna hit save here.
Now this is a little bit different because we have two menu items with
separators and then this sub-menu item.
The first thing will be called options, which is what we're gonna see in the
menu, and then four options underneath it.
So now when I write click, we get favorite, delete, and then options.
And notice I now get four more options underneath them, which is so cool.
So this is highly customizable, enabling you to create these great experiences.
Inside of your .NET Maui desktop apps.
Well, there you have it.
That's an overview of how to use the contact menu or fly out item menu
thingies inside of .NET Maui to add great functionality into your desktop apps.
This is gonna work exactly the same whether you're running on
Windows or you're over on your Mac.
You're gonna get that great right click experience to add those options.
Well, there you go.
Lemme know if you have any questions in the comments below.
I'll leave all the documentation links down there.
If you like this video at all, make sure you give it a thumbs up.
I do these videos on my weekends and on this one it's a holiday
weekend, so I'm just recording this on my holiday weekend off.
Um, so if you like this content, be sure to like and subscribe and of course if
you have any questions or comments or recommendations of other things you wanna
see, leave them in the comments below.
That's gonna do for this video.
Until next time, thanks for watching.