Mastering .NET MAUI SwipeView for Enhanced App Experience

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 want to continue that series that I've been doing which is beginner series content for.net Maui to go a little bit further when you start to build more complex applications and today specifically I'm going to 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 [Music] thank you 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.net Maui now some of these things are actually Blended in my previous xamarin 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 Dona Maui so I want to make a targeted video just for that so today we're going to talk about swiping specifically like when you swipe to delete something or swipe and have different actions inside of a specific list or collection view one cool part about Don 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 Don and 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 DOT net Maui specific uh repo just for this so you don't have to go through the history but if you want to watch some of those videos they're all there which is kind of nice so we want to add some actions here we actually have pulled a 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 Etc 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 because it's reused throughout the application if we go 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 want to do is wrap anything that we want to be swipeable with a swipe view so I'm going to come in and I'm going to say swipe View and add that in there then we're just going to 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 write items left items inside of here so these are items that are going to 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 going to be a list or a collection of items so uh basically you can add a bunch of things inside of here but specifically we'll want to add a swipe items you can think of that as like defining a list say hey I'm going to add a bunch of items into here right and specifically we're going to add something called a swipe item so there's write items swipe item list and swipe item now this item has a bunch of different properties on it right so we have things like text here for example so I could say favorite I could also come in and look at like background color or there's icons you can think of these as pre-defined 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 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 underscore bot dot PNG and just hit 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 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 executor 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 can do is change the swipe behavior on invoked so this is cool this is going to 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 closes 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 going to go ahead here and copy these write items paste them down here and then I'm going to 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 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 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 going to 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 going to 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 rounded corners or whatever so you might not want to see it when it reveals but maybe it is underneath it because you have a custom view inside of it which we'll talk about here in a second but yeah you kind of get that nice functionality which is really really cool all right well let's talk about that sort of custom functionality I mean 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 want to put in a custom view so here what I'm going to do is I'm going to put in a swipe item view this basically is a swipe item that's templated and I can put anything inside of it so I'm going to put a frame inside of here I'm going to say background color of orange and let's just do a with request of a hundred a height request of a hundred and then let's go ahead and do 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 going to be a circle all right and then let's do horizontal Center vertical Center just like that I'm going to 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 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 the 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 want to put another one in here I could do that let me go ahead and Index this in formats as xaml 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 want to do a pop-up to let you know that you're favoriting it so there's a few ways to do this 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 going to 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 going to 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 and dependency 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 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 dialog box here so let's go ahead and do that I'll have 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 going to go ahead and grab our coffee which this one here is the Kenya from Blue Bottle and I'm going to go ahead and click on and we see the pop-up 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 want to invoke you know a method in the code behind what I really want to do is call into my viewmodel stuff right I want to actually do some nvvm data binding right so let's say for example you want to just go in and erase this invoked and I want to 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 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 savings into a database then I also have this relay command from the.net Community toolkit for mbvm that's going to 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 going to 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 know that there is a binding context of my coffee equipment view model let's go ahead and see if we can do a pop-up 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 going to pass in the coffee and it's going to see if the copies null return else is going to pop up a dialog box so this is inside of our view model so how do we get access to that let's first add a breakpoint here and the first thing we would want to do is go ahead and say command parameter what we're going to pass in it's actually quite easy we can do binding Dot so this will pass the object into our Command automatically so it's going to pass in the coffee now all I 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 mbvm videos I've talked about this a little bit before even in my dining 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 it doesn't really matter you can just bind to your view model but here we're binding to our model today we want to jump up to our view model so I can come in and say command I'm going to say binding then I'm going to say source and the source specifically will let me give it a different Source type and I'm going to say that this is a relative uh Source here and I can then give it an ancestor type and that type is going to be hey Dot Maui go search up a level of binding contacts and go find this specific type somewhere so what I'm going to do here is I'm going to give it an X colon type I'm going to 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 that's going to 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 it's 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 this should now hopefully as I as I relaunch this this should give us the update that we're looking for okay so hot reload's coming up and again we have a break point 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 going to go ahead and do a pop-up 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 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 or a little bit tighter around a specific feature so let me know what features you want me to cover now Gerald over on his channel has 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 because I was 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 if 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 be in here and subscribing to the channel I hope you have a great day and talk to you later thank you [Music]

Channel: James Montemagno

Views: 9,795

Keywords: xamarin forms swipeview, xamarin swipeview, left swipeview, dotnetmaui swipe, swipeview, .net maui swipe view, swipe to delete, learn .net maui, .net maui tutorial, .net maui swipview how to, swipe to delete dotnet maui, xamarin, xamarin forms, xamarin.forms, swipe, swipeview .net maui, .net maui beginners guide, dotnet, james montemagno

Id: BHBYHC_9URc

Length: 18min 35sec (1115 seconds)

Published: Thu Jun 29 2023