Today we're answering your questions.
How can we create reusable sells for our list, view collection view, carousel view,
anything that has an item template inside of Xamarin forms and .NET Maui tune in.
Hey everyone.
I'm James Montemagno and I'm back with another Xamarin 101 and .NE 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, select.
In case your list, view or collection view or 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 Donna Maui, as well as same UI here would apply to both.
But we have our coffees of the world.
We have a different tabs on the top and bottom.
We've been building this out and this entire series of you're
interested in this, you can go ahead and take a look at it all.
All of them.
Uh, 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 as 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.
Pretty much everywhere.
Right?
So it's, it's an all these different pages.
So we want to reuse that cell.
So let's take a look at it.
Now specifically I have the first two pages up.
The one here is my coffee.
So here's the coffee equipment page.
And if we scroll down, we see that we have a list view, uh, 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, uh, long
press on it and, and, or swipe to delete.
And then here we have a grid and this grid you'll see as 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?
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 look,
in lo 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.
And 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 solid anywhere.
One or application, actually we can, we can put it just statically
on a page or inside these different lists, user 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.
Now, inside of the file, new dialogue, there are two things
that you may want to use.
Uh, the one that we're going to use as a content of 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.
You know, component basically, but it's, uh, you know, Xamarin forms
are done in Maui content view and a content view can be used anywhere.
You can pass it and do additional bindings on it and pass it
parameters and all that good stuff.
Now there's also a view cell and a view cells are only using.
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.
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, uh, we can see down here, but it's just a partial class
to content view, nothing special.
So all we're going to do over here is actually just copy
this code into our coffee cart.
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 a 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 him.
And that was it.
There was 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, um, 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 he knows that the image, the name of 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,
um, 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, uh, view, I'm just going to
give it a grid as the name.
I'll say padding a 10 over here.
And I'm just going to go ahead and.
Delete this here.
I mean, it it's just a view, right?
It doesn't actually matter that it's a content view.
Uh, Xamarin forms, a Donna 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.
You know, uh, you know, controls anything you want to call it.
I'm just going to call it sells 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 name space 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 myself.
There we go.
That's pretty cool.
It brought it battery in 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 trickled down.
I'm not doing anything special.
Um, 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.
Um, you can create custom bindings to it, to put links to the documentation
too, but that's just really.
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.
That's pretty nice.
Right. So we can just get rid of that.
There.
At 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 namespace just like that.
And it's just the namespace, 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.
Um, 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, um, 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.
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 it's nice here is that if I was to change the background color to
red, for some reason, um, this would trickle on every single one of the
different pages over here, uh, as well.
I think that I have two.
I might have to re uh, reset it on this one specifically.
Let's double it.
Go ahead and refresh this here and just see if it propagates through, uh, for
the change, but to prove that it's a reusable cell, uh, we'll be able to
see that, uh, it should be red on these and then, um, not read on other areas.
So there's one.
Over there.
Can 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 super-duper nice.
And I use that all the time.
When I was building the Xamarin evolve application, you'd have like a speaker
car and you'd have a session card and you'd be displaying that information
in multiple places all over the place.
Well, 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.
Anywhere, almost in Xamarin forms that aren't a Maui there's data templates,
carousel view collection view, um, the binder 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.
Now since we have our one data template set up or one view cell set up, we
can set up another content view, uh, 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, 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 ourselves
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, um, 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, um, data template
selector, oops, data template selector.
I have a 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.
Let's say that normal get sat.
Maybe it should be special.
There he goes.
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.
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.
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, uh, return, I'll say coffee
dot roaster equals equals.
Yes, please.
Then let's return the.
Uh, special else, the normal.
Alright, so that's all we're going to do in here.
So you can basically decide, um, 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.
So if it's a cat return, the cat cell, if it's pizza return the pizza cell.
So you can do that.
All right.
As that.
Alright.
So what I've also done now that we have our coffee card is that
also created another view over here, which is just a special cell.
And all this is, is a label us as hellos, hammer and forms.
And we will 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 what we're going to do with our new data template selector is
used 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.
Template selector in our code.
So that's what we're going to do here.
We're going to create a data template and there we go.
And the first data template we're going to create, um,
specifically is our, um, 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'll be our special down here.
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, uh, that we have needs a
view cell, and then it has this special contact syntax in here.
So we're actually gonna want to do is go ahead.
Um, remove this from this item template, and we're going
to put that into our normal.
Alright, that's there.
And we're going to also put this down into, well, actually, let's go
ahead and just say this, this one, doesn't have, um, a, a, a, a swipe to
delete or anything like that on it.
And this is just going to be our special cell, right.
Now, if I was putting this into a collection view, it wouldn't have the
view Sal because the collection of you don't have view sells as sort of legacy
from a list view 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, of
course you can do this in your app.
XAML you can do it in a bunch of places.
But what I'm going to do here is I'm going to say sells 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, uh, 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, I'll
do static resource of special.
There you go.
Perfect.
Now all we need to do at this point is come up here and
instead of bringing and doing.
Item template.
What we're going to do is just a lead this outta 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,
and we're going to say static resource to our coffee selector.
So again, our coffee selector.
Okay.
Is our data templates that are inside of the data template selector.
So usually 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 ELs to the specialist.
Let's go ahead and go through.
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, but you can see that we
have our long presses and our non long presses over here for our specific.
But we're now using data templates, 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 as a 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 select a 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 can be any.
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 coffee.
And then we brought in our data templates 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, use 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 reuse those cells and all
of your different lists, views, and collection views, or do that
anywhere inside your application, let the data bindings trickled down.
And of course then select different templates with those
reusable cells with data template.
So like, If you enjoyed this video, give it a thumbs up.
And of course, don't forget to subscribe and hit that notification bell.
So you get updates on all the videos I've put here on my channel.
I'm super excited for even more Xamarin forms.
One-on-one in dine-in Maui one-on-one 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.