Reusable Controls and Data Template Selectors in Xamarin.Forms & .NET MAUI

today we're answering your questions how can we create reusable cells for our list view collection view carousel view anything that has an item template inside of xamarin forms and donna maui so tune in [Music] hey everyone i'm james montemagno and i'm back with another xamarin 101 and dinette maui 101 this time talking about reusable cells inside of list views collection views carousel views anything with an item template you can reuse your content views that you're creating those data templates additionally we're going to take a look at how to use a data template selector in case your list view or collection view are displaying different types of data and maybe you have in this case we have our coffee app but maybe we have coffee maybe we have roasters and maybe we have different grinds and we want to display different cells based on information that's inside of our physical object so let's go ahead and take a look at some of the code so as always we have our coffee application right here and it's built with xamarin forms and donnie maui as well the same ui here would apply to both but we have our coffees of the world we have uh different tabs on the top and bottom we've been building this out in this entire series so if you're interested in this you can go ahead and take a look at it all all of them here we have databases we have list views collection views calling rest backend services all that good stuff it's all really fantastic so definitely take a look at the entire series but as we can see it's like this coffee here is actually being displayed on a lot of different pages so for example here on each of these tabs this cell is here on this page with the collection view it's here on the my coffee it's also here it's pretty much everywhere right so it's on all these different pages so we want to reuse that cell so let's take a look at the code now specifically i have the first two pages up the the one here is my coffee so here's the coffee equipment page if we scroll down we see that we have a list view with all the different bindings on it and then we have this data template selector over here and then our data template i should say and that has a data type of coffee and then down here we'll see that there's some context actions so i can long press on it and or swipe to delete and then here we have a grid and this grid you'll see has a frame stack layout image and some more labels inside of it and that's specifically what we see right here so this is this page right here now if we go over to our collection view page we can see that it's actually a different object type it's a collection view so we have a collection view which has group data inside of it but in this instance we have things inside of a swipe view but looking low and behold we have a grid we have a frame we have a stack layout we have this same control with the same exact data bindings basically it is our coffee card if you will that's being displayed anywhere inside of our application so what we want to do is sort of refactor this code out into a reusable cell now we can reuse this cell anywhere we want our application actually we can we can put it just statically on a page or inside these different list views or collection views so that's what we're going to do so we're going to go over to our solution over here and i've created a cells folder right here so i'm just going to right click and say add new item now inside of the file new dialog there are two things that you may want to use now the one that we're going to use is a content view this is a generic content view where you can create a reusable controller a component that you can put anywhere inside of your application in multiple places think of it like a blazer you know component basically but it's a you know xamarin forms are down in mla content view and a content view can be used anywhere you can pass it and do additional bindings on it and passive parameters and all that good stuff now there's also a view cell now view cells are only used inside of a list view so if you are only working with list views and you want to create reusable view cells and you would do this here but we're not going to do that because we're going to work with a content view since we're going to put this coffee card inside both the collection view and the list view so i'm going to name this coffee card and hit add all right so what we have here specifically is a content view and the content view has content sort of like a content page but it's a view if we go to the code behind we can see down here that it's just a partial class it's a content view nothing special so all we're going to do over here is actually just copy this code into our coffee card let's go ahead and just put it right in there just like that i'm going to go ahead and reformat that that's with xaml styler i'll put a link to that in the code below as well so what have i done so i basically just took out the stack layout that was there and shoved in my view that was it there's a grid there's coffee here all that good stuff now i can we can see there's little squiggles here we can actually see that i can put in my models so if i do a namespace here of xm lns models and i do coffee uh models there it is i can do x colon data type and i can do models of coffee as well and then it will get my compiled binding so it knows that the image the name and the roaster are there too so you can bring that same concept over which is very nice now one thing you may have noticed here actually is that is that i have this in a content view and there's a grid inside of it so surprisingly now actually this content view is redundant at this point because i have a grid inside of it so there's actually going to be an additional layer here so if we want to we can actually just get rid of that so instead of it being a content view i'm just going to give it a grid as the name i'll say padding of 10 over here and i'm just going to go ahead and delete this here i mean it's just a view right it doesn't actually matter that it's a content view xamarin forms it down in maui they don't care the biggest difference that we need is when i go into the code behind we need to change this to a grid as well so that way it knows exactly what it is so even though i created a content view that can be anything you want all right well that's inside of my cells those could be views that could be you know controls anything you want to call it i'm just going to call it cells for now so let's go back over to our page where i just deleted it out of and what we're going to do is we're going to say cells colon and we'll say coffee card now we'll see over here that the intellisense in visual studio is telling me to bring in my namespace and let's go see what it brought in up here so let's scroll over and bring it down and it's brought in my cells there we go that's pretty cool i brought it that ran right there and that's pretty nice because not only did it minimize my amount of code that's here i'm just reusing this and the data bindings trickle down i'm not doing anything special since it is a grid it knows it's a grid i could i could set the background color on this specific one or different bindings to the the different items that are inside of the grid property i mean you can create custom bindings too which will put links to the documentation too but that's just really nice so now that we have that let's head back over to our other page where we have that exact same code and let's just paste it in there like look at that it's pretty nice right so we can just get rid of that there add in the namespace and we are good again let's go ahead and take a look up top and again it just brings in the name space just like that and it's just the name space that's it so super duper simple now the nice thing here is that those data bindings do trickle down automatically we brought in specifically the x data type so that is our specific compile binding so that's also super nice too so that'll be optimized when we go and it's using all my normal you know static resources that i have on the frame and everything like that so let's go ahead here and see it oh it's already running perfect so now our application is exactly the same there's no difference at all but i've cut down and minimized the code there and this is being used on all of these different pages so what's nice here is that if i was to change the background color to red for some reason this would trickle on every single one of the different pages over here as well i think that i have to might reset it on this one specifically let's double go ahead and refresh this here to see if it propagates through for the change but to prove that it's a reusable cell we'll be able to see that it should be red on these and then not red on other areas so there's red over there if we go back over here to the coffee view there we go perfect and of course i can remove that and it will go away back to our normal colors so that's how we're creating reusable cells and that's super duper nice and i use that all the time when i was building the xamarin evolve application you'd have like a speaker card you'd have a session card and you'd be displaying that information in multiple places all over the place now let's say though that on one of your pages you not only want to have one type of specific cell you want to have multiple types of cells inside of your list view or collection view well that's where a data template selector comes in remember that pretty much anywhere almost in xamarin forms down to maui there's data templates carousel view collection view the bindable templates that you can have they all have item templates and those have a data template and data template kind of has the data binding to a specific view and in this case a grid which is pretty cool now since we have our one data template set up or one view cell set up we can set up another content view that will enable us to switch between them with a data template selector so this is actually pretty pretty cool so for example let's say inside of our code here on our page we want to change it where the yes please coffee is completely different looking from blue bottle coffee or something else we have something special inside of here we can do that so here's what we're going to do is we're going to come into our cells and i'm going to add a new class all right and what i'm going to do down over here is i'm going to call this my coffee data template selector so just a normal class and we'll change this to a public class and then what we're going to do is we're going to say data template selector oops data template selector there we go and we'll go ahead and bring that in which will be inside of xamarin forms now this specifically will have an implementation of on select template so as it's going through the list or the collection view or something else what's going to happen is it is going to enable us based on the object determine what data template we want to return okay so what we're going to do here is we're going to say public data template and i'll say normal here i'll say get set and then i'm going to do public data template not normal i don't know what i'm going to call it we'll say normal get set maybe it should be special there we go let's change it to special down here there you go and that's what we're going to do so those are our two data templates that we have so here's what we can do is we can say var coffee and we're going to bind these to the coffee that's coming in we'll say uh cast there we go the visual studio is solving it for me that's amazing uh we'll bring that in and then what we'll do is we'll say return we'll say coffee dot roaster equals equals yes please then let's return the special else the normal all right so that's all we're going to do in here so you can basically decide you know what it is and of course here i know that i'm only getting coffee but let's say you had a list of objects you could say if it's a dog return the dog solve it's a cat return the cat cell if it's pizza return the pizza cell so you can do that all right so that's pretty cool all right so what i've also done now that we have our coffee card is i've also created another view over here which is just a special cell and all this is a label that says hello xamarin forms and we'll say hello special coffee here right so nothing special just a cell that we created it's there's literally nothing here so no data bindings anything like that it's just that's all it is so now we're gonna do with our new data template selector is use that inside of our coffee page so here let me go and open that up again over here all right now inside of our coffee page we're going to want to go ahead and create a data template selector in our code so that's what we're going to do here we're going to create a data template there we go and the first data template we're going to create specifically is our normal so i'm going to say normal over here and then another one we're going to create another data template is going to be x colon key and this will be our special down here there we go now we're able to do is we're able to put in our card or special cell now this is going to vary so for example here our list view that we have needs a view cell and it has this special contact syntax in here so what we're actually going to want to do is go ahead and remove this from this item template and we're going to put that into our normal all right that's there and we're going to also put this down into actually let's go ahead and just say this this one doesn't have a a swipe to delete or anything like that on it and this is just going to be our special cell okay now if i was putting this into a collection view it wouldn't have the view cell because the collection views don't have view cells a sort of legacy from list few days but there is our normal and there is our special all right now we need to do is we need to create a data template selector that we've created earlier and set the values so we're going to do that now inside of our resource dictionary and of course you can do this in your absence you can do it in a bunch of places but what i'm going to do here is i'm going to say cells coffee data template selector and what we can set as a key and we'll say coffee selector there we go and then what we'll want to set over here is both the normal which here will be a static resource to our normal so this normal property here specifically is this normal property and then this static resource of normal is this data template here i want to do the same thing over here for our special and we'll do static resource of special there we go perfect now all we need to do at this point is come up here and instead of bringing and doing an item template what we're going to do is just delete this out of here and set it on our main list view so all we're going to do now is simply come in and say item template we're going to say static resource to our coffee selector so again our coffee selector up here is our data templates that are inside of the data template selector so it is really that data template selector that we made earlier and that is basically going to tell it to use normal or not normal so let's go see and put a break point down over here see if we can hit that really quick as this boots up and here we go so we can see coffee roaster blue bottle and then over here that should return the normal else the special so let's go ahead and go through it and boots up and here we go check it out so we have the group tier so we have blue bottle we have yes please this is a silly example of exactly how it would work you can see that we have our long presses and our non-long presses over here for our specific coffees but we're now using data template selectors to decide what gets displayed inside of this list view and we're still using our reusable cells and views that we created earlier so let's recap it really quick we created a content view which happens to be our coffee card that is now reusable in our entire application we then created a data template selector over here that implements a single override method which is our on selected template that allows us to return a data template based on what our item is in this case we know it's always coffee but it could be anything then over inside of our page we created a two data templates one that was our standard view cell we just copied and pasted it up and another one that was a separate cell that just said hello and welcome to the special copy and then we brought in our data template selector and set our item template right here you can do the same thing on anything that has an item template like collection views list views carousel views and all that good stuff well there you have it i hope that this has been a nice informational video showing you how to re-use those cells and all of your different list views and collection views or anywhere inside your application let the data bindings trickle down and of course then select different templates with those reusable cells with data template selectors if you enjoyed this video give it thumbs up and of course don't forget to subscribe and hit that notification bell so you get updates on all the videos i put here on my channel i'm super excited for even more xamarin forms 101 and done maui 101 videos coming to the channel leave your recommendations below in the comments or any questions you may have and i'll try to answer them so until next time thanks for watching [Music] you

Channel: James Montemagno

Views: 3,206

Keywords: xamarin, xamarin.forms, .net maui, dotnet maui, maui, listview, collectionview, recyclerview, reusable components, data templates, item templates

Id: TkadU_OfmIE

Length: 19min 18sec (1158 seconds)

Published: Thu Nov 04 2021