Xamarin.Forms ListView - Everything you need to know (& .NET MAUI)

all right we're back talking about one of my favorite controls part of xamarin forms the list view i'm going to break down every single bit that you need to know about what is in the list view and how extensible it is and why sometimes you want to use it over the collection view so tune in [Music] alright before i get into this week's episode big shout out to my friends over at cinderdesignco who sent me this awesome hoodie i'm really excited it's our five year anniversary of a design company formed by some of my best friends in the entire world we go back over a decade they're the reason that i have these awesome thumbnails cool intro outro videos and all this cool branding on my twitch stream youtube and of course my podcast with soundbitefm now uh if you're looking for them some design work check them out i'll put a link in the show notes below alright well let's get into it i'm going to be talking about the list view yes not the collection view why not the collection view everyone's all hyped on the collection view uh well the list view is tried and true let's just be honest with you the list view has been around since xamarin forms v1 um you know it works it's optimized if you know how to turn on the correct settings there's a lot of extensibility built in like headers and footers and grouping and time context actions and it just kind of works to be honest with you um it's maybe not the most flexible to do crazy horizontal vertical grouping shenanigans that's where the collection view comes in but you don't always need that sometimes you just need a list for a view and a list view um to display some data i think the list views at least a great place to start because it is going to enable you to display data in your app and every single app needs to display data look at my cadence that displays a list of cadence sensors that were found via bluetooth list view over inside of island tracker actually use a collection view there but i started with a list view in many instances where i have friend requests that is a list view but the cool part though is that you can start with the list view and easily swap over to the collection view later and that's something really important that we'll talk about because there's a lot of similar features it's a lot harder going the other way collection view back to list view because it has limited functionality now in a future video we'll go ahead and maybe upgrade what we're going to do today with said list view to a collection view but we're just going to start over with the collection view so let's take a look all right well here we are inside of the coffee application and i've updated the view model behind the scene so if you watch some of our previous episodes on mvvm101 xaml 101 we had little button clicker events inside of here and we kind of got rid of those so we can optimize and use our list view so the first thing that i want to show you as i enter debug mode over here is that i have a observable range of coffee so it's something that i created because we are building a coffee app at some point in life we're going to do that instead coffee has a roaster a name and an image associated with it now after that i've also created another one here called coffee groups and this is a grouping of string coffee both the observable range collection and the grouping come from mvvm helpers and what this does is it enables us to have a list of lists and that's really cool for grouping where you want to have this key which is going to be our string up top that we can display ahead of everything now i also created an async command of refresh command that's normally where you pull data down from the internet here i'm just going to go ahead and you kind of wait two seconds and then continue on and again async command from nvpm helpers and then all i'm going to do is populate said coffee and coffee groups inside of here i have some coffee roasters such as yes please and blue bottle and some of their most recent coffees i'm a subscriber of yes please originally they were tonks got bought by blue bottle and then they did their own thing again now they're yes please i'll put a little affiliate code down the bottom if you're looking for great coffee subscriptions give them a go that's it here's our simple refresh is busy task delay 2000 nothing let's go to our coffee page it is blank it is beautiful let's check it out look at that it's amazing all right so let's go ahead and clean this up a little bit and let's start using our list view so i'm just going to go in i'm just going to say list view boom we got a list view amazing all right so it there's nothing in there but it is totally there the cool thing about a a list view is that it has background color that you can set it's going to fill the entire space as much as possible and additionally you do not and you should not put it in a scroll view it already has scrolling capabilities built in so be aware of that it's already good to go okay let's maybe not make it background color red i like to make it transparent because sometimes i find there's a difference between like ios and android with color backgrounds and then that way i know that you know hey just this one background of the page is the color that i want in there okay so let's go ahead and add some items so what we can do is we could data bind it to our list of coffees but i'll show you a nice little quick tip here and here i'm going to go ahead and add a list view of item source item source is the observable collection array and i enumerable of anything of items it could be anything here i'm going to just put in a you know default display list of items they are a string i'm going to say item one item two item three okay and what's nice about this is that you can start to explore a little bit of the list view so here i have the different items that are inside of here i can tap around the default background color will be a little bit different based on your application and this is just going to to string whatever it is to display it this default view cell is what xamarin forms is using here inside the list view to display that item now the nice thing about the listview is it's super customizable and you can do whatever you want with it so for example if you want to go ahead and start to modify the item template the item template will enable you to modify set item so for example here is the list view item template and that item template is going to enable us to give a custom view cell and data bind to properties on our items inside of it okay now every single list view item template or any item template is a data template okay now what i've done is i've copied in data template text cell and if i type this by hand while i'm in the changes only hot reload sometimes the app may crash because it gets into a weird state so if you see that it's kind of because you need to have these in place ahead of time so kind of be aware aware of that okay so that's why i put this here now every data template will take a view cell or in this case it could take a default text cell switch cell image cell those are built into xamarin forms or you can just have your own we can take a look at the default ones here's a text cell and i can do a binding here to dot which would then display those items again so nothing fancy and this text cell binding dot is a binding directly to that item okay and again it calls two string on it and this is a string and that works out perfect for us this text cell also has a detail on it and i can do a binding to dot there we go and now we see item 1 item 2 item 3 and you can see i get these click events right built in there is also a switch cell over here so if i say switch cell there we go now there is no detail but there is just text and i get switches so if you needed that that's really nice and there is also an image cell which is also kind of nice that has text and it also has a detail and again i'll do a binding to dot and boom we're gonna go now we don't have any images though and that's a bummer so let's get some images okay so let's delete this default item source boom and let's do a data binding here an item source binding to coffee there it is boom and now we have well i guess we have coffee coffee coffee coffee because it's too stringing it over here we actually need to fill in the different text properties so now we know this is name and this is roaster over there now if you remember there's also an image which was set to the image property this is just a string to a url but it totally works the same where i can do image source a binding over here to image and xamarin forms will automatically download those images for me which is kind of super nice now this is a pretty good looking cell but it's not super customizable right it has some features in it that i like but maybe it i want you know like a frame and i want it to have drop shadows i want to be super duper nice well you're going to need to create a custom view cell at that point these image cells switch cells and text cells are really best for things like a table view those allow you to shove different pieces of content in it's not the prettiest control in the world but it totally works most of the time in applications you are going to put in a custom view cell instead of an image cell so again i'm going to go ahead and remove set image cell and put in a view cell now there's a very stark contrast between list view and collection view when it comes to the item template in fact with the collection view they got rid of the view cell concept and that's really nice because it removes one hierarchy of cells or views that are represented there's really nothing to do in this view cell it's just syntactical sugar at this point but be aware that when we do our future episodes on collection view that we're not going to talk about view cells at all because collection view doesn't have it but we're in list view world so it totally has it so let's totally wrap it here all right let's do something simple like put a label over here text over to binding name all right and now we're back yay we did it we did it all right um let's get a little bit fancier here okay let's put in some padding over here of 10 and okay that looks pretty good let's do um uh vertical option center and now we're in the center again and let's do something very simple over here let's do like font size you know 40 or 50 right it's huge oh no that's not good there's there's something going on in our code font size 50 that's not good let's go ahead and refresh it over here and see why it got mad at us and i'm pretty sure i know why so when i set this over into 50 that's going to be a little bit too big for the view cell so we're going to need to adjust that a little bit ah this is great because remember i said sometimes things crash we'll be aware here that hey we have data types associated here with our view model and now that we're outside of just compiling our application we're actually going to need to set the data type for the item inside of here so we can do x colon data type and then we'll do model of coffee and now when we debug it will know that that name property exists when you're inside of hot reload it doesn't really know anything about that so it just kind of is going free and wild so now it's going to go ahead and do this so let's see here oh okay so we have some issues here we can see is that this font size 50 is way too big it's not displaying our item and that is because the list view itself the item by default height is fixed i think it's around 66 pixels or so or density pixels or whatever it is so we need to do a few things here the first thing we need to do is we need to say has uneven rows and i can say true and what that will do if we go ahead and adjust this padding back and forth maybe back up to 10 there we go it will adjust that height for us automatically see that there now you can also say row height 100 and when you do that and we go ahead and change this and we'll change it back here over here you can see that we can set it to it's still going to be uneven right so i'd have to set that to false so we have two different sizes here if i set this back to 0 back to 10 now what we're going to see is that each item has a 100 pixel or density pixel height associated with it so for me i always like to just go ahead and set this to true over here and that will take care of it a hundred percent and we'll go ahead and refresh that view and just like that we're good to go now we can really pretty this up in fact what we can do is we can wrap this uh this label now inside of a frame there we go which is looking pretty good all right see we have these different items inside of here we'll maybe just make this large or something like that that'll be good now we're good over here what we could do is maybe put this inside of a stack layout over here put that in there put this over here there we go and then maybe this will be the roaster and then again what we'll do is let's go ahead and wrap all of this and another stack layout over here and then let's put an image in here source over here and we'll do a binding to image boom and now we'll get an image all right orientation horizontal boom and let's go ahead and make that a little bit smaller so let's make this um um with request 100 maybe let's see how that looks yeah it's a little big maybe 66. there we go and then here what we'll do is we'll do a vertical option center and all right it's a little mad at me i think what's happening whenever i make a change is that it's sort of reloading that view so it's kind of keeps going up and up and up and up and up so sometimes when you're really diving into these data templates it can be really tricky i'm pretty sure in collection view you won't have that issue at all because of how it automatically handles caching for you but i think just hot reloading and some of this stuff gets a little a little tricky but it's not the worst in the world when you're when you're messing around with this so let's go ahead and get it back up boom all right so we have our stack layouts our frames and things are looking pretty good i'm pretty happy with that um so far the other thing we could do with this frame is we could do like rounded or corner radius maybe like 20 and that should look pretty good and then has drop shadow true there we go cool that's looking pretty good now a few other things that we can do inside of this list view is that we can actually set the separator colors here so if i wanted this to be red for example now we have this red going on let me zoom in so you can kind of see there's a red separator the other thing you could do is you could make it transparent but in this case i could say separator visibility i'm going to move this over a little bit more equals none okay it's a nice little feature and now our separator is completely gone all right that's pretty nice in general let me get rid of that there all right now there's a few other things built in to the list view that you should totally know about so beyond the item template there are a few other things such as headers and footers over here so for example i will go ahead and shove in some code and we see this beautiful header in here there's just header and footer in fact you can you can just set over here the header to text and then it will display text over here if i zoom in but you know that's not that's not super great but the header and footer is nice because what it enables you to do is is set anything you want above or below the list view so it goes on the bottom so if you have likes of anything on top it'll scroll away from it it'll do everything with it there now i am going to stop this and let's go ahead and go to our view model and what i'm going to do is um i'm going to go ahead and just add more items here into our list just just so we can see more items and see the scroll happening over here i think that's probably worth it so let's go ahead and do that really quick over here so this header of course is not super pretty but it is something that you could obviously optimize and put anything in you put anything in it so that's the nice thing here what i wanted to show straight from the documentation is you can put a header in you can put labels in there you put images in there you put buttons in there you can do anything you want it's your day it's your it's your world you know what i mean uh which is kind of nice all right so here we go so now you can see the footer at the bottom which is pretty cool what i often like to do in the footer is like put a button in there right and then you could say like um [Music] you could say text load more in there right and then you could um you go ahead and say something like vertical option center or horizontal option center and then we should get a button in there i think we just need to reload our list so let's see if we can default that there and let's go none again delete the footer really quick here with our hot reload acting up on me there we go our load more button over there so you could do something like that where it's load more or as it scrolls you can kind of put like a little loading indicator in there if something is visible there and that's kind of kind of pretty nice same thing up in our inner header we're able to do is obviously change these colors here do something like a horizontal option center and say coffees of the world right and let's just go ahead and remove and paste that back in there we go let's go ahead and get that in and out now we get our coffees back good to go so there's a lot of nice things that you can kind of do inside of here right you're able to really customize this look and feel of it there are a few other things that i'll totally say that you can do though is not only of headers and footers but on every view cell you can also have context actions this is kind of cool too so view cell dot and you can have this thing called a context action okay and these are menu items and this is actually really cool because you can say text maybe favorite over here and now in when i long press on this or an ios swipe left or right it will actually show me favorite up top so i can long press on this and boom i'm good to go it's actually super neat okay you can also have multiple context menus in here so you could say delete for example over here when you long press now favorite and delete you can optionally make some of these destructive so i could say true and now when i go ahead and bring this up you won't see anything different on on android but on ios it'd actually be red instead of not red so it's kind of cool so there's a lot of options that are inside of here so i do like that quite a bit now i will go ahead and preface that it's not really customizable right you're not really swiping left and right there is a brand new swipe view that you could use to give you consistency but if you just want to get started you can use some of these context menus right away okay really nice now notice though of course that i'm still clicking around and we probably want to get access to those but first let's talk about group headers okay this should be really cool and we'll see if we crash i'll reel it or not so all this entire time we have been talking about coffee straight up just coffee and a list let's do coffee groups okay boom now that should almost work well there's two groups so that actually kind of work there are two groups but what we want to do is we want to say is grouping enabled true ah that's pretty cool so when you have is grouping enabled what this will do is it will say hey i'm going to realize that there is some sort of you know mechanism here that this is a list of lists so the grouping object falls right in line here where there's a header which here is just two stringing and then the items inside of it so we have yes please and blue bottle and we can of course spice this up a bit so for example what we can do is our is grouping enabled we can also say group display binding okay notice over here that we have is grouping enabled short name binding that's kind of if you want like a the abcd on the left right you can put those in there and a header template so you can also customize that header template and then this display binding over here and i'm going to do a binding to key which a key over here is actually really nice because if we look at our grouping peak to definition we can see key is a string but you can make it really complex right it doesn't have to be a string you could have a coffee roaster and that coffee roaster could have a bunch of information i could have put coffees with the list of coffee and then it could have had a bunch of information in it so you could really make it complex because while this is a binding to a key it's an object and our object just happens to be a string now i could do a bunch of other things inside of here such as you know add a list view [Music] dot group header template and i could add a group header template inside of there if i wanted to or i could just use the default all right so what have we gone through thus far because it's been a lot okay we have list view we have uneven rows or set rows we have item sources with item templates with view cells and those view cells can have context actions with them you can have groupings and here we have groupings inside of our copies by the display name that's on there you can have headers you can have footers they can be whatever you want you want them to be inside of there inside of that item template again it can be super customizable or you can use the built-in ones and of course you can show or hide that separator visibility all right well there's actually still a few more things here before we jump out into the code what i want to show you is another one such as is pull to refresh enabled okay that's a cool one where i can just say true and now i actually have pull to refresh enabled in my app that's pretty cool what i could do also is i can say it is a refreshing and i can do a binding over here to is busy and i like to do mode uh one way away it only updates it you know only i update it not the pull to refresh updating it and i can also say refresh command okay i can do a binding to refresh command whoa so what i'm able to do is pull to refresh it should wait for about two seconds and then go away whoa how cool is that you can also even change the refresh color if we make it let's just make it red why not and now it's red so that's built in you don't need to do anything it's just all built in automatically to the list view all right refreshing pull to refresh what else is in here oh cell optimization let's get into that puppy really quick now by default here the list view will create new cells every single time and that's not super optimized so the team came up with something that they call caching strategy that's super duper important over here and you should always set it to recycle element the default is retain element there's recycle element and data template because i didn't even get into data template selectors which is a no another episode but recycle element will give you the most optimized performance over here all right all right now before we go and get out of here let's go ahead and do something else over here which is click and do something on the page so there's a few different events that you can do inside of here one is item selected okay there's also item tapped which is another event those are two different events tap tap tap selected is when the selection changes from one item to another item okay and as you saw when i was selecting items it kept it selected so you will have to manually deselect those okay no matter what the other thing we can do down over here is we could have a a clicked event on our menu item and just go ahead and add that in there so i just want to add some some defaults over here behind the scenes now you're saying james you're not using mvvm oh my goodness how aren't you databinding these and doing all this stuff that's a whole different video i will get into that and talk through that code next week so tune into that okay but let's go ahead and just simply boot this up and see what events we get in our list view and which ones we want to use okay this will be super duper nifty so i did need to stop hot restart to restart it because i was doing some code behind and we're going to get in here okay so that's one thing that's why i stopped and restarted but often you know your list view properties can look kind of this big as you're sort of building it out so don't be don't be scared by that but hopefully our list view is looking pretty good with our beautiful coffees let's see over here there we go now if i tap on one of these i get an item selected and i get an item tapped event because i tapped it and i selected it okay now if i tap it again look over here i get a tapped event so you can decide if that's the what how when you want to use it right you'll only get a selected event when it changes the selection but regardless you will probably want to deselect it over here now the other thing's true here if i long press i didn't get an item tapped event i'm still of this one selected and i can now hit favorite and boom i get a menu item clicked now when i go in over here we can see that i actually get nothing in here there's a sender here there's a menu item and i could look up some different information inside of the sender so this is actually kind of important is inside of this menu we can see that i have a bunch of different properties on here and i'll show you how to get access to that coffee because at some point down here the binding context will be will be empty but our route here is the menu item so let's go ahead and do a few things here's what i like to do when i'm playing around with this whenever the list view item is tapped i just like to null it out okay i literally like to do this list view over here sender dot item selected equals null okay now the reason i do that is because i want to sort of automatically deselect it no matter what all right so i'm just going to boot it up and we're going to see the difference here of what our what of our application looks like just by setting an equal to null for item tabs i never use the item tapped event as a a selection because there's an item selected event that gets fired less you know so if the user just taps on it really quick you know it's going to do the tapped event twice and that's something that i think is really important to kind of like finesse inside of here so let's go ahead and like tap and look at that actually since it's not since it's not selecting it ever it deselects it we get that nice little little um you know drop shadow in the code behind i'll talk about in the future how to get that on top there's a way of doing that there but you know this is something that's that's quite nice just to select that there now um now what we can do though is we could do something like this i could say var item i'll just say coffee actually that's a better item equals list view over here there we go sender dot selected item as coffee okay now whenever i tap on an item i'm going to try to cast a selected item to coffee and if coffee equals null will return okay else what i'm going to do is i'm just going to do something simple which is i'm going to say display alert copy selected and we will do coffee dot name okay so notice that the selected item is a binding to the physical item that's inside of there and of course i'll need to put an async inside of here or else i won't be able to do it but i get that actual item back okay that's super duper important so i actually get that item back all right let's see it's going to go ahead and probably stop building and let's go ahead and build it up here now there is a few other options you don't need to put in this item tapped event sometimes i don't sometimes at the very end whenever i'm done doing anything in this item selected area i then set it to null totally acceptable too i think that the ui looks a little bit better when you just null it out in the item tapped but that's like a you type of you know optimization but notice that here even though i get item taps i always get item selected even though i'm deselecting it right away like the order of operation always works here i'm always getting the correct item and i'm deselecting it no matter what all right that's super duper nice boom boom boom boom right i like that so that all works perfect well let's talk about this favorite because i need to get hold of that coffee all right so let's go ahead and do that what i can do now is i can say var coffee and i'm going to say menu item sender dot binding context as coffee okay i'll do the same thing here if coffee is null return and we'll say coffee favorited so this binding context here is what's going to allow us to get access to that coffee under the hood and that's what's super nice about it now there are ways to do data binding this to a command inside of our view model with relative bindings again we'll talk about that in next week's episode where we mvvmify this code behind here i'm not against code behind i had some people write some comments about oh mvvm you got to do everything just a little bit much i have all sorts of tap events click events ui interactions in my code behind you do you that's what i like to say you live your life and go to town that's what i like to do all right so now if i long press on this now notice i don't get any of these other events because i didn't select anything it's smart enough to know but i can say favorited boom i favorite in my coffee it knows it right away we can add a break point down here let's go ahead and do it again favorite our coffee boom we have all of our information here just like we would assume boom it's awesome it's good to go all right i think maybe i have now covered everything inside of the xamarin forms list view maybe i don't know there's a lot more to it there's probably other optimizations data template selectors a whole bunch more to go into but honestly if this wasn't like the optimal most amazing listview 101 overview of everything you possibly need to know i don't know what is it took a lot of time putting some prep notes from the documentation um together to really guide you through building out this kind of really pretty looking coffee app so far i mean just adding a little frame making like nice little cells looks pretty good in my opinion but i really hope that you enjoyed this if you do have any questions about the list view or like hey how do you do this let me know and i'll make some future episodes maybe not as long as this one but this is literally called everything you need to know about list view so um it kind of hopefully is everything you need to know i hope that you found this super enjoyable and i do hope that you subscribe to my channel right down over there and ding that notification bell that will make sure that you get alerted when i put out new episodes which is basically every single thursday and sometimes every tuesday too i post all of my live streams on here that i do on fridays over at twitch.tv james montemagno i've been building out some really cool applications over there such as a peloton app clone cloning the ui of the peloton fitness app that's been quite fun and you can find those previous episodes on the peloton cloning app live stream playlist which is nice if you have any questions about anything please reach out let me know put them in the comments below until next time thanks for watching [Music] you

Channel: James Montemagno

Views: 18,741

Rating: 4.9932089 out of 5

Keywords: xamarin, xamarin.forms, listview, data, collectionview, headers, grouping, footers, ios, android, visual studio, visual studio for mac, selection changed

Id: VzFqQv8YJNM

Length: 36min 48sec (2208 seconds)

Published: Thu Feb 04 2021