Using Xamarin.Forms SwipeView + CollectionView Bonus!

this video is going to be all about swipe view and new control well newish in xamarin forms that will allow you to basically swipe any element on screen we're going to see how to swipe a label and how to swipe items in a collection view so diving right in we are here in a file new xamarin forms application with the template that you get out of the box i'm showing you everything on a mac with the ios simulator but swipe view is you know examined form so it works on android ios maybe uwp i'm not entirely sure um but you know at least on these platforms and of course you can also do this with visual studio on windows so first let's get that title updated and we're going to say swipe view sample here we go let's save that and you can see how reload in action with hot reload you can just you know update that ui while you're running so that is really cool and now you know let's just keep for you know normally i take out all the labels here let's just stick with these and wrap them into a swipe view so swipe view is something that is available in xamarin forms some late 4 version but if you're using xamarin forms 5 then it's definitely in there and with swipe view you can basically swipe anything so that is really cool so if i wrap this label into a swipe view you can see here that intellisense will tell me this swipe view right here and now suddenly this label is swipeable let's save this i don't know if this works no it doesn't do anything yet so without any configuration this is not going to work but now if we well actually let's start at the swipe view at the root here so we have a couple of things here that we will see and one of the things is that it has a couple of events so the swipe is changing the swipe has ended so i've started this is for all the swipe items that i'm going to implement here in a little bit and these are events that you can leverage to you know detect whenever something is happening maybe you want to execute some logic then that is what you can do with these events right here we also have a threshold and the threshold is you know whenever something is swiped for um what what is going to be the threshold for your swipe items basically so i'm not going to use any of these check out the documentation i'll put the link in the video description but these are a couple of the properties and the events that you can use on that like top swipe view level but let's look at the thing that actually is important here and we're going to say swipe view dot and the intellisense is not really helping you here but you have bottom items you have left items you have right items and you have top items so what this will tell you is that you can swipe all the directions well not diagonal um that might be a nice nice very tricky feature but you can swipe all the directions basically top bottom all the things but you know typically it will be left and right probably so let's just stick with you know your typical scenario let's do the right items and inside of that you can then say swipe item here we go and you can start configuring your item so we can say now our text is tada and the background color is red so we're going to see something interesting now whenever i save this it looks as it did before but now suddenly i can swipe this label oh the other way there we go and you can see ta-da you can see it gives a little weird thing oh actually you don't see it because um it's if if i change this to be left items here we go you can see it better make that left items you can see this text overlaps right that's because by default the label has a transparent background so that's why this is looking a little bit funny which you know has an easy fix just give your label a background whoops color is white there we go save that and boom suddenly it looks a lot nicer and here you can see you know let's let's uh well let's keep it at the left you can see that you can just swipe it and then your action is revealing so that is pretty cool right you can click it and then it closes down again that's all behavior that we can customize too so by default actually we are missing one level here because inside of your left items right items etc you can have swipe items here we go so that is kind of like you know whenever you're not specifying it it will put it in that swipe items thing automatically but actually if you do implement this then you get a lot of extra properties that you can use like the behavior sorry the swipe behavior on invoked so what is going to happen here is that i clicked on it and um the auto is the default option so then it will close um and you can say like hey i want it to actually close or i want to remain open so if i send to remain open and i save that and i do the same thing again and i click it it remains open but it's still fired in the background right we'll we'll implement that event in a little bit so that is kind of like how you can change that behavior now another thing you can do is set the mode which is execute or reveal so reveal is like the normal the default here and that just reveals the buttons but you can also do execute so that basically you've probably seen it sometimes that you can swipe it all away and then it will automatically execute the action that is attached to this item so you can just swipe it all the way and then it will actually execute it actually let's just start implementing some event here so that it makes it really clear so what you you have the clicked one here um which you can definitely just use if you want to you know have it only tapped but if you want to have the different modes with execute and actually tap it on it then the thing that you're after is invoked right here or of course it has a command that will otherwise be triggered if you're like more in the mvvm kind of scenarios but here for the invoked let's put this event in here and if we then go back to our code behind here we go we have our event handler and what you can say here is display alert always a favorite and once this is the title right title swipe swipe invoked okay there we go let's save that now that's not hot reloaded so i have to start our sample app for a little bit here should be really quickly and whenever we do i think i set the mode still to execute so if i then just start swiping this thing then it should execute here we go so i just swiped it i didn't do anything else and it will invoke like that and whenever and that's also the default so whenever i do this and i save it again then it just reviews it and i really have to click it to invoke it and then you can see that behavior in action it closes automatically and then i can influence that by keeping it open if that's something that you want so lots of possibility and flexibility here so that is really really cool so we've already seen the swipe item you can set a background color we can set the invoked we can also set an icon image source so you can also set an icon on this which is of course also really cool if you have ever used the list view with the context actions they were kind of limited you would only have limited options but with this you can change the actual icons and do all the things so that is um really amazing and the other thing well let's just actually add another one to see you know also how it works with multiple ones so maybe you want to sub subscribe to a certain youtube channel uh let's make this yellow you know i'm not good with the styling here but you can see you suddenly now have two so you want to you know don't want to put a lot of options in here because the space is limited but the cool thing is you can also combine things of course so we can have the left items right here but we can also have the right items together with that and it's interesting i didn't save it yet so now i can't swipe to the right but i can swipe to to this side right so but whenever i start using the the right items here then let's do blue and green so you just so you can see the difference and subscribe now please there we go save it and here we have tada sub please now see so you can swipe left and right now suddenly that's enabled i could do top and bottom as well um but you know that would probably be a little bit messy so that is pretty cool what you can do with this now another thing that you can do if we give this an x name here we go swipe view we also have the options to programmatically swipe view dot open so you can specify a certain item that you want to open so you can open it programmatically and of course the same thing is that you want to close it so you know if you have scenarios where you need to programmatically close or open a certain item then you can definitely do that with these methods as well so that is another thing that it provides you so much flexibility so that is really cool now there's two things i still want to show you um the first is that you also have on the swipe view you have the is enabled so we can say is enabled and whenever we set this to false then all of our swipe action goes away so it's just a regular label again so you know whenever you have some kind of condition where you do want to swipe and others you don't want to swipe then you can easily toggle this from your code that's really cool but i think the last thing is maybe even the most interesting because that is a very typical scenario so i'm going to remove actually the other labels and i'm going to enter here a collection view because you know i mentioned the list view before and this is something that you would typically use in a collection view where you have multiple items and it did the swipe actions are context actions of each item right you want to delete one or a favorite one or do whatever so we're going to have a little collection view and i'm going to whip up a little item source here i'm going to go into some binding things you might want to check out other videos on this channel i'll put one somewhere and that's popping up in your screen right now that's relevant where you can see more about data binding or using the collection view like this so my items here we go and then inside of that collection view we have want to have an item template here we go and inside of that you need a data template and inside of that i'm just going to again use i'm just going to copy this label here we go and whoops and i'm going to make the text not start developing now but i'm going to say binding dot so that shows the actual item that we're going to use so for each item we're going to use this template and the text is going to be the actual text in in one of the items of my collection here um and then collection view oh so actually i'm not going to just use this label but i'm going to of course also wrap this swipe view around it because that's the thing that we wanted to do i'm going to press ctrl i here so that it all formats nicely and let's just keep only the right items here we go and format that nicely again there we go and then i have to re-apply this one with winding dot okay and i think so you're not seeing it actually let's do this too with swipe me there we go um and then i have to create my my items thing so let's stop this here for a little bit go to our code behind and then i'm going to say public it can be just a list of string here we go my items get set don't forget to make this a property because that is what you need for data binding and this is going to be a new list of string here we go and i'm just going to initialize it like this so it's going to be hi there please whoops make it a string please subscribe i'm not sure if you're you're getting my very subtle hints here uh to my channel uh if you haven't done so or you know you can also read please click that like button or leave a comment because you know i love to hear from you and interact with you subscribe to my channel there we go and whenever i do this i need to still set the binding context so that it actually knows where to look for my my items property is this here we go and i can actually start running it again and now what we have is a list hopefully where we have multiple items and each of these items is swipel see here we go so now you can swipe this one and this one and this one and i think you can even you know you can probably refine the behavior that all the others close whenever you do this and then now for each one of course you want to wire up the command to to actually fire the right command for your item so yeah that's how you apply this to a collection view which is not different than applying it to any other element so you can have some more complex layout of course than just the label we can also wrap this into a stack layout if that's what you want stack layout doesn't really do anything in in this regard but whenever we save that you can see it just swipes the whole stack layout too so you can have these complex layouts and it will just swipe um the way you would expect it to do so that's how we can apply this swipe view i have um there's going to be questions i'm sure on how to wire up that command for any of these items i'm going to link a playlist right now in the corner of your screen um that will have all kinds of videos on the binding scope that's the one that you're probably looking for that will explain how that data binding thing work within a collection view or list view so that's probably something that you want to check out i think i covered most of the things in swipe view not in detail there is still some things left for you to discover on your own um but i've shown you all the things that are at least available in there so let me know if there's something that you want to see in more detail please let me know in the comments um if you're new to this channel hey thank you for watching um it's very welcome and please don't forget to subscribe to my channel click that notification button so you will be notified immediately of new content like this video do all the things basically that you you are expected to do when watching a youtube channel because everyone is asking you to do this and i'll be seeing you for my next video keep coding you

Channel: Gerald Versluis

Views: 5,844

Keywords: xamarin, xamarin forms, xamarin.forms, xamarin android, Xamarin iOS, xamarin swipeview, xamarin swipeview sensitivity, xamarin swipeview in listview, xamarin swipeview example, xamarin forms swipeview command, xamarin forms swipeview example, xamarin forms swipeview, Xamarin Forms 101, xamarin forms tutorial, Xamarin Forms UI, Xamarin 101, Xamarin tutorial, xamarin forms tutorial for beginners, C#, Xamarin Forms 5, xamarin tutorial for beginners

Id: NMc6PdBusfQ

Length: 15min 58sec (958 seconds)

Published: Fri Mar 12 2021