I get a lot of questions after folks finish my four hour .NET
MAUI training course right here on YouTube, which is what do I do next?
Or how do I do this thing or that thing?
Well, I wanna continue that series that I've been doing, which is beginner
series content for Donnet Maui.
To go a little bit further, when you start to build more complex applications,
and today specifically, I'm gonna.
Cover one of the most requested feature videos, which is how to
swipe to do things, swiping on a list or collection, or just anything.
You can swipe left, right up, down, all around, anything that you
want with the built-in swipe view.
So let's go ahead and check it out.
Hey everyone.
I'm James, and right here on my YouTube channel I put out tons of
great .NET MAUI content, .NET content, XAMARIN content, XAML content, MVVM
content, all the content all the time.
And I get a lot of questions.
I read all of them right down below, specifically around what
type of topics you want me to cover.
Well, one of the things that many folks asked me to cover is some more of the
complex views built into .NETMAUI.
Now, some of these things are actually blended in my previous X Forms
video series, so you can actually go check out a lot of those videos
and get a lot of coverage there.
However, there are some new things in .NET MAUI.
So I wanna make a targeted video just for that.
So today we're gonna talk about swiping specifically, like when you
swipe to delete something or swipe and have different actions inside of
a specific list or a collection view.
One cool part about .NET MAUI.
And the swipe view is that you can actually swipe on anything at any time.
So you can have an image, for example, swipe left right down all around.
So let's go ahead and check it out.
Okay, so let's check out the coffee application.
This is an application that we converted from Xamarin.Forms into .NET Maui.
So here we have a list of coffees and we have a bunch of other features
that we have in our application.
So you can go ahead and check this out.
I have a whole brand new net Maui specific, uh, repo just for this.
So you don't have to go through the history, but if you wanna
watch some of those videos, they're all there, which is kind of nice.
So we wanna add some actions here.
We actually have pulled to refresh on this collection view, but we might be
really interested in adding a way to like favorite or delete these coffees.
So here, let's go ahead and check it out.
Here we can see we have this collection view.
It's grouped, it's got a bunch of stuff going on to it, et cetera, et cetera.
But the real thing that we want to care about is how we add the
swipe functionality into this view.
So here we can see that this data template.
Is using this coffee card cause it's reused throughout the application.
If we go ahead and take a look at the coffee card here, for example, we can
see the grid, the frame, the stack layout, all the things inside of it.
All these things right here.
So what we wanna do is wrap anything that we wanna be swipeable with a swipe view.
So I'm gonna come in and I'm gonna say swipe view and add that in there.
Then we're just gonna go ahead and drag this down.
Perfect.
So just like that, we've enabled swipe view on the coffee cart itself.
But now what we need to do is add some items.
So what we're able to do is say swipe view dot.
And then when I say items, we can see that there's bottom items, top items,
right Items, left items inside of here.
So these are items that are gonna show up on the right hand side, the
left hand side, the top or the bottom.
So let's go ahead and add an item to the right hand side over here.
And this is gonna be a list or a collection of items.
So, uh, Basically, you can add a bunch of things inside of here.
Um, but specifically we'll wanna add a swipe items.
You can think of that as like defining a list.
Say, Hey, I'm gonna add a bunch of items into here, right?
And specifically we're gonna add something called a swipe item.
So there's right items, swipe item list.
And swipe item.
Now this, uh, item has, uh, a bunch of different properties on it, right?
So we have things like, uh, text here, for example.
So I could say favorite.
I could also come in and look at like background color or there's
icons and you can think of these as predefined, you know, Basically
predefined, templated swipeable views.
So there is a little bit of control, but not that much control.
But if I add another item here and say text delete here, there we go.
And now, uh, hit save.
When I come back over here, we can see that I can now swipe and I have both
favorite and delete, which is quite cool.
So I get those two views right inside there.
And then when I tap on one, it closes.
So that's kind of cool.
So that's one thing that is very, very nice.
Now I can customize these a little bit too.
So if I wanted to on this favorite, I could say, um, let's say
background color of pink, and then let's do an icon image source.
And what do I have inside of here?
I have a net bot, so net under bot png and set save there.
And now when I swipe out, we not only get our icon, our net icon here,
but I also get the pink background.
And you can kind of notice that this sort of change from a default
button into just like a view.
So the view itself is changing, so there's not a lot of.
Functionality.
Well, actually there's kind of a lot of functionality built into the default
one, but not a lot of customization.
And we'll talk about custom swipe views here in a little bit,
but this is pretty nice, right?
We have our favorites, we have our delete, we have all this stuff set up here.
Now we can do some other things too.
So, for example, uh, on these items, we could also adjust the mode and we could
say, is it going to execute or reveal?
Now the mode specifically here, execute or reveal will determine what
happens when the user swipes it out.
The default is reveal.
And what that means is that it will just reveal the icons and they can click on it.
If you have one item and you want to like execute on, swipe over, it will
execute whatever items inside of there.
The other thing we, we can do is change the swipe behavior on invoked.
So this is cool.
This is gonna automatically close or remain open.
So for example, uh, right now it's closed.
That's the default.
But I could also say remain open.
And now when I swipe over and I click on something, You see it remains open.
So I can pragmatically then close it on demand, or I can
have the user go and do this.
Right.
So, kind of up to you what you would like to do.
Let's just go ahead and say close here.
Auto is also sort of the default behavior that's there.
So now when I tap on it, close is automatically, which is quite nice.
All right, so how do we at this point, maybe add some other items?
Maybe we want some items on the left hand side.
Well, let's go ahead and do that.
So I'm just gonna go ahead here and.
Copy these right items.
Paste them down here and then I'm gonna change it to left items.
Amazing.
Hit save.
And now we have the same ones over here, right?
So we have favorite and then delete.
So you can see how they get added into the list.
So the first one that gets added is the farthest on the left or farthest on the
right into the list there, so you can kind of decide that functionality right there.
And then you could decide if you want the items on the left to remain open
or close when you're going ahead, and then adjusting those automatically.
So kind of nice.
So just like that, we have swipeable items inside of our application,
which is kind of fantastic.
Now there are a few.
Other, uh, cool things that you can do here.
So, uh, specifically we note that when we pull this out, they just
kind of show up underneath it, right?
But we could actually have it swipe and kind of move out if we want with it.
So there's a, there's a mode here for iOS and Android.
Specifically in these platform specific name spaces.
So platform configuration, android specifics, and I'll
link to documentation for this.
But what this lets you do is come to your swipe view and say
Android colon swipe view dot.
And you can say Swipe transition mode.
So you can do drag or reveal.
So here I'm gonna put drag on hit save.
And now we can see it drags out from the the other side, right?
So a little bit different.
Type of functionality, so it drags out, which is quite cool.
Right?
So that's kind of cool how it does that automatically for you.
So you're sort of in control there.
What you want.
And of course you can do reveal, and then that's gonna go ahead and now just
reveal it when you go ahead and swipe.
So some might be a little bit based on your, you know, items
that you're putting inside of it.
If you're, you know, this, here we have these kind of roar, you
know, rounded corners or whatever.
So you might not wanna see it when it reveals, but maybe it is underneath it
cuz you have a custom view inside of it, which we'll talk about here in a second.
Um, but yeah, do you kinda get that nice functionality,
which is really, really cool.
All right, well, well, let's talk about that sort of custom
functionality and maybe we don't want these items inside of it.
Um, so what we can do, for example here, is instead of using these
predefined swipe items, we might, for example, wanna put in a custom view.
So here what I'm gonna do is I'm gonna put in a swipe.
Item view, and this basically is a swipe item that's templated and
I can put anything inside of it.
So I'm gonna put a frame inside of here.
I'm gonna say background color of orange, and let's just do a width request of a
hundred, a height request of a hundred.
And then let's go ahead and do, uh, vertical options of center.
And then a corner radius of 50.
So it's a perfect circle and a padding of zero.
And then inside there we'd want to do something like, I don't know,
put a label and I'll say text, and this is gonna be a circle.
All right.
And then let's do horizontal center.
Vertical center, just like that.
All right, I'm gonna hit save here.
Now let's see if the hot reload is gonna work for me.
Oh, it is.
Cool.
Perfect.
So we have this circle here.
So just like that, right?
So I have kind of this full control, right?
Compared to, this is just revealing.
This is here.
So this is nice because I may not want it to slide out.
I have this custom, custom view here that's sort of revealing underneath it.
So this is kind of really, really nice.
So what is nice here is that you can put anything inside of here.
Just like you saw in this swipe item view, and then you're totally good to go.
So you can have as many of these swipe items as you want.
So if I wanted to put another one in here, I could do that.
Let me go ahead and index this in format the aml, and now we
should get multiple circles.
Really cool.
Cool.
All right, so now let's talk about something else that we could probably do.
All right.
Which is talking about actually interacting with these specific items.
So let's just do something on this favorite, right?
Let's say we want to favorite something and we wanna do a popup to
let you know that you're favorite it.
So there's a few ways to do this, uh, specifically.
Every single swipe item has a method called Invoke.
And when you invoke something, what will happen is that it will
call a method in the code behind.
All right, so let's go ahead and do that.
So here's our application.
And again, when I swipe out, I want to click on that favorite
and go ahead and do something.
So here I'm gonna on my swipe item, say invoked.
And here I have a method behind that I've created ahead of time.
So an event handler.
You can also have it create a new event handler for you.
I'm just gonna go ahead and add it there.
Now, whenever that is clicked, it's going to call in to the code
behind here on the page, right?
So here is my view model that's being passed in independency
injected, but I have this swipe item.
I know that it's going to be a swipe item as the sender.
And then notice here that the binding context of that swipe item is my coffee
because I'm inside of a collection view.
Or if you're inside of a list view, either one, each of the items inside of it is
bound to the item inside of it, right?
Not the view model, but the actual item inside the list.
So here now, I'll just go ahead and grab the coffee and then I'll see, you
know, pop up a little dialogue box here.
So let's go ahead and do that.
I'll add a little break point here, and now when I swipe out, hit favorite, boom.
We hit our break point.
We can see that we have a swipe item here with all of our different information.
We're gonna go ahead and grab our coffee, which this one here
is the Kenya from Blue Bottle.
And I'm gonna go ahead and click on and we see the popup boom.
Just like that, which is very cool.
So now we're going ahead and we're getting that.
Back right now you might be saying, well, James, I don't wanna invoke,
you know, a method in the code behind.
What I really wanna do is call into my view model stuff, right?
I wanna actually do some M V V M data binding, right?
So let's say, for example, you want to just go in and, and erase this
invoked, and I wanna say command.
There's a command and a command parameter.
Now remember in this case, right, we are.
Bound to our coffee itself.
So we have the, uh, image name roaster, but we also see here
that I have a test command.
If I go into my coffee, we can note that I have all the information
for saving this into a database.
Then I also have this relay command from the Donnet community toolkit for Mvvm.
Let's gonna go ahead and do a right test, for example, but it'll
have all this information here.
So let's now go ahead and save this.
And I'm gonna go ahead and swipe over.
Hit Favorite, and now note that I have the same exact name, the image
information, roaster information ID information, and I'm calling into that
automatically, which is quite cool.
Awesome.
So we can do code behind, we can bind to our model.
We might be saying, James, why would I data bind to the model?
I want to data bind to my view model.
Oh, you're so clever.
So you're correct.
If I looked at that code behind, again, we note that there is a binding context
of my coffee equipment view model.
Let's go ahead and see if we can do a popup from there.
Right?
If we look at our.
At our coffee equipment view model, we can note that I actually
did create a relay command.
Now this is gonna pass in the coffee and it's gonna see if the coffee's null.
Return else is gonna pop up a dialogue box.
So this is inside of our view model.
So how do we get access to that?
Let's first add a break point here, and the first thing that we would wanna do
is go ahead and say command parameter.
What are we gonna pass in?
Well, it's actually quite easy.
We can do binding dot.
So this will pass the object into, uh, our command automatically.
So it's gonna pass in the coffee.
Now what we'll need to do though, and it's a little bit more verbose, is we need to
actually create a relative source binding.
To jump up a level, and if you've seen any of my Mvvm videos, I've talked about this
a little bit before, even in my .NET MAUI beginner series, this is in there too.
We need to basically jump out of our list and up, and again, if you
have a swipe view and swipe items that aren't in a list for your
collection view, doesn't really matter.
You can just bind to your view model.
But here we're binding to our model today.
We wanna jump up to our view model.
So I can come in and say, command, I'm gonna say binding,
and then I'm gonna say source.
And the source specifically will let me give it a different source type.
And I'm gonna say that this is a relative, uh, source here.
And I can then give it an ancestor type, and that type is gonna be, Hey .NET MAUI,
go search up a level of binding contacts and go find this specific type somewhere.
So what I'm gonna do here is I'm gonna give it an X colon type, and I'm
gonna say view models and specifically my coffee equipment view model.
Okay.
So that is my relative source data binding relative source.
Find this ancestor, go find it up the stack.
Now the last thing I need to do is give it a path, which is basically, what do
you want me to call on this view model?
And that's gonna be my favorite command.
You don't get IntelliSense for that because these are very
like loosely coupled here.
So it doesn't really know about it, but rest assured it
will find it automatically.
Through the power of data binding magic.
Awesome.
So now let's go ahead and see if this works as I pull out.
Now, if I'm doing hot reload here, I already had a binding
context, it may not update.
So let's go ahead and refresh this here and let's just see if that updates.
So sometimes that works, sometimes it doesn't when I'm
updating the binding here.
But, uh, there should now, hopefully as I, as I relaunch this, uh, this should give
us the update, uh, that we're looking for.
So, Okay, so hot reloads coming up.
And again, we have a breakpoint right here.
So ideally when I swipe out, Hit favorite.
There we go.
Data binding is updated.
We have our coffee that's being passed in and that's gonna
go ahead and do a popup here.
Just like that.
And now we have it all set up.
All right.
What else can I tell you about the swipe view?
Well, the swipe view itself, this is kind of all you might really need to know.
You can swipe anything.
You can put it in a list, you can put it in a standalone object,
and you're totally good to go.
Well, I hope that you found this video really informative.
I want to do more smaller videos that are a little bit tighter
around a specific feature.
So let me know what, what features you want me to cover.
Now, Gerald over on his channels, covered tons of stuff, so
head over to his channel too.
I'll put a link up over there and at the end of the page cuz
Gerald's always talking about crazy awesome new features all the time.
But of course, you know, do it my way.
Uh, if there's something that you're like, oh, this is great,
can you go a little bit deeper?
Or, Gerald doesn't cover that, can you cover this?
Let me know in the comments below what you want me to see covered
right here on my YouTube channel.
I really appreciate you tuning in.
You have any questions about anything, check out the documentation or comments
below, and of course, give this video a thumbs up if you liked it.
And of course, jam that subscribe button if it's your first time here.
I make all these videos in my spare time, so I really appreciate you, uh, being
here and subscribing to the channel.
I hope you have a great day.
Talk to you later.