Coincidentally, or maybe not, a couple
of different people have asked me the same question how to do grouping in
CollectionView in .NET MAUI. So that's what we'll see in this
video. If you've been working with Xamarin.
Forms before and now with .NET MAUI then you might might already know about the
ListView. The ListView also has the ability to make groupings. So you will
have groups of items which consist of a little header
which is the group header. You know what the group is about and
then you have a couple of items that belong in that group. Now
Collection view has the same thing. It kind of works similarly. So I'm
going to explain to you how to use it in the collection view and
you will automatically learn how to use it in list view. You will learn two
things in this one video. How cool is that? Now for the
collection view you can think of like maybe categorizing
the items. So in this video we're going to see a little bit about
animals. We're going to see monkeys, we're going to see bears and then the headers is
going to be monkeys and bears. And then underneath that we're going
to have monkeys and bears. Right? But you could also think of maybe a contacts
app. So you have the contacts in your phone
and you want to have each letter of the first letter of
their name and then you can scroll through it, A, B, C, D and so on and
you can categorize everything that way,
right? So the structure, all the things how you need it is totally up to you. But
that is what grouping is in a collection view is all about.
Let's go check out how to implement that in .NET MAUI. Here we are in Visual
Studio 2022. I got a File, New .NET MAUI application
already up and running. You can see it here running in the Android
emulator and the code behind here is just a File, New
.NET MAUI application. Well I did a little bit of preparation
here so let's stop running for a minute. I added these two things. I
added an Animal which has a Name and Location, Details
and ImageUrl, we're not going to use all of that but it just
has a couple of fields. This can also be a person or a product
or whatever your go to group. And I have this AnimalGroup. Now that
is where the magic kind of starts because this is just a model, right,
with a couple of properties and this AnimalGroup is inherited from a list of Animal. Now this can be any type
of collection. List makes sense but this is a list of
animals and we add a little name field to it. So that
is going to be whatever we're going to show in the
header. Again, this can be anything. The Name probably makes sense for most
of the things but here we can set it like this. And we have a
little constructor to actually initialize this animal group, right? So we're
going to create a couple of these groups and then it's a little
bit of a mind bender here. So this name is for the whole group.
And then the object itself has kind of items,
right? Because it is a list of animals. So it's a little bit
of mind bender. But once you get the hang of
it, it will all make sense, I promise. So that's all the code that
I have prepared. Now let's go to our main page. And what we're
actually going to do first is add a little collection view. So I'm going
to remove all of this, the ScrollView, the Hello .NET
bot. We're not going to do any of that. So what I'm
going to add here is a CollectionView. That's what we are
starting with, right? And I need this to set an item source. So let's
make an ItemSource here, which is going to be {Binding Animals}. There
we are. So we don't have this ItemsSource yet. Let's
actually fix that right now. So I'm going to create here in the
code behind, I can remove this count field. I can remove
this OnCounterClick. We're not going to use that. And I can create here
this property. I can just type prop and press the tab key. So that's cool.
You'll learn three things in one video and it will create this
property for you. And this is going to be a list of
AnimalGroup. So now it really becomes a mind bender, right?
And we need to name this Animals. So now we have a list of groups, which in itself is also a list. So
this is kind of getting confusing, right? But it makes sense
because you want to have a list of the groups, right? And the groups
itself are also a list and that's where the grouping comes in. So let me
actually finish this. And we want to make this a new list of AnimalGroup. Here we are. So of course if you want to
update this at runtime, then you want to probably make this an ObservableCollection so that you can add and remove groups dynamically during runtime as
well. But for now, it's just a static list. It will be fine. And
while I'm here, let me paste in a whole lot of code. So don't
be afraid. I have a little sample code here that
I'm going to paste in here, which basically populates the
list with a couple of groups. So let me paste that in and you can see that we
have this Animals.Add() and I'm going to add this new
AnimalGroup of bears, right? So we're going to have bears and then
we're going to create a new list of animal. And here I have my animal
model. So I have one animal which is the American black bear and here I
have this new animal Asian black bear. And you can add more and more
items here or you can pull them in from some service over the
internet, right? And you can add all the animals here. And here
we have Animals.Add() and we are going to create a new
animal group for monkeys, right? So we have this new list with monkeys. So we
have the baboon and we have the cappuccin monkey and we have the blue
monkey. So we're going to add that all in your group. Now if you're going
to get this dynamically from a REST service over the internet, then what
you probably want to do is first check if this is the first
animal that's in a group. So if the group already exists inside
of your animals collection and if the group is already there then
add the animal inside of there or else first create
the group and then add the animal in, right? So that's kind of like
where you would do that dynamically. If you can't figure it out, let me
know down in the comments and I will answer you. Or if enough people
ask the same question then I will make another video so I
can help you all at the same time. And the last thing that I need
to do here is set the BindingContext to this. So I'm going to use
this page code behind from the main page as the BindingContext
as well. So you can use this binding animals here as the item
source and then everything will work perfectly. Now of course,
basically this is it. Well one thing we need to set IsGrouped here to true for the CollectionView
and now we have a grouped Collection View but it doesn't look pretty,
right? We want to add the item templates and technically this
has nothing to do with the grouping but we're going to add it
anyway. So I'm going to copy a little bit here from
off the side. And first what I'll do is add a CollectionView
ItemTemplate. So this item template is going to be applied to one item inside of the AnimalGroup, does
that make sense? So it's going to look at that
AnimalGroup so it's going to look at a monkey. Well it
doesn't really matter... An Animal doesn't really matter which group it
belongs to and it's going to apply this template. So it's going to have this
little VerticalStackLayout and do two labels and it's going to bind to the
name and the location. And that's the thing that we see here in the animal,
right? So the Name and the Location. So that's the actual animal record
that you're going to see. So this has nothing to do with groups but what
we also have here in the Collection View is the CollectionViewHeaderTemplate or GroupHeaderTemplate. Sorry. So you
have the header template too, which is the header for all of the CollectionView.
But we also have the Group HeaderTemplate and that is the header
for just one group. So in our case, the bears and the monkeys. And we can
do something special with that. We can style that header. Same thing for the
footer. We also have the footer here. So the footer for the whole collection
view or the group footer templates. You can also do a footer
for one collection. Basically, I'm going to stick with the
header for now. The footer works exactly the same. So if you want
to do that nice exercise for you at home, try it and show me the
results in the comments. The group header templates, let's do that. And
I'm going to make this a simple label. So this is going to be a data
template. And let me add a label in here with a font size of something a little bit bigger, 18. I don't know what else do we want to
do? Font attributes maybe make this bold so that we can see it's a
heading. We want to give this a background color so that we can see
it's a heading. So make that gray. And of course we have to have some
kind of text here. So we want to do binding and then name because
this looks at like one record inside of our list of
animal groups. It's a bit confusing. I warned you. So
this is looking at one record in here. So one AnimalGroup and it's going to read the name from that. Right. We have the Name
property here. If I would add a letter property here, then you could do
binding letter and it would do all the same things. So that is how that
works. Now we have this binding and now basically whenever we
run this, then I would expect my list to come up with two bears, a
couple of monkeys, and they were nicely grouped in
different groups in our collection view. So that's what we are
expect to see here. Let's wait for the Android application
to deploy and to come up here. The emulator already comes
up, so let's see if my demo actually worked out. I hope so
because the demo gods have been favorable to me.
And let's see. Boom. Here we are. I'm working up
to this moment. Let's do it. The video could be half
as short if I were to do this. Yes, here we are. So we have the
bears and the monkeys, right? So that's really cool. We have these
groupings right here with two bears, two monkeys. And now you know how to
do grouping in the collection view in .NET MAUI and you can take it
from here. Basically you know how to work with
the templates, you know how to work with the headers, the footer. So make the
CollectionView awesome inside of your application. Well, I
totally understand how people have questions about this because we have lists of
groups of animals inside of things, so it's a little bit
confusing. But after you've gone through this, after you did this yourself
once, then it will become much, much clearer and you will know how to do grouping
in the CollectionView. So I hope this has been useful. Please let me
know what you've created with this. Let me know down in the comments if you have
any more questions or requests for other things. The code for this is up on the
GitHub repository. You can find that down below in the
video description. And also the data set that I've used here is part of the
docs. I just copied and pasted it from there so you can find that in
the docs link, along with more information there as well. If you've
liked this video, don't forget to click the little thumb down there so that
YouTube knows that you actually like this video and it will spread through the wonders
of the YouTube algorithm to more people. I would be very appreciative of that.
If you want to know more about .NET MAUI, I got this wonderful playlist
right here and maybe you want to know more about the .NET MAUI Community Toolkit, which is very awesome as well. Check out this playlist a list and click
here to see if you're subscribed to my channel. See you for the next one.
