Grouping

This page shows how to bind a grouped list of items to a CollectionView

Large data sets can often become unwieldy when presented in a continually scrolling list. In this scenario, organizing the data into groups can improve the user experience by making it easier to navigate the data.

In MauiReactor you can create a grouped view of your collection using an overload of the ItemsSource prop method as shown in the example below:

public class Animal
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }

    public override string ToString()
    {
        return Name;
    }
}

public class AnimalGroup : List<Animal>
{
    public string Name { get; private set; }

    public AnimalGroup(string name, List<Animal> animals) : base(animals)
    {
        Name = name;
    }

    public override string ToString()
    {
        return Name;
    }
}

class MainPageGroupingState
{
    public IEnumerable<AnimalGroup> Animals { get; set; }
}

class MainPageGrouping : Component<MainPageGroupingState>
{
    protected override void OnMounted()
    {
        State.Animals = CreateAnimalsCollection(false);

        base.OnMounted();
    }

    public override VisualNode Render()
    {
        return new ContentPage
        {
            new CollectionView()
                .IsGrouped(true)
                .ItemsSource<CollectionView, AnimalGroup, Animal>(State.Animals, RenderPerson, RenderHeader, RenderFooter)
        };
    }
    private VisualNode RenderPerson(Animal animal)
    {
        return new Grid("*,*", "64, *")
        {
            new Image(animal.ImageUrl)
                .GridRowSpan(2),

            new Label(animal.Name)
                .GridColumn(1),

            new Label(animal.Location)
                .GridRow(1)
                .GridColumn(1)
                .FontSize(12)
                .TextColor(Colors.Gray)
        }
        .HeightRequest(68)
        .Padding(4);
    }

    private VisualNode RenderHeader(AnimalGroup group)
    {
        return new Label(group.Name)
            .Padding(5)
            .FontSize(40)
            .BackgroundColor(Colors.Gray)
            .TextColor(Colors.White);
    }

    private VisualNode RenderFooter(AnimalGroup group)
    {
        return new Label($"Animals in the group: {group.Count}")
            .Padding(5);
    }


    private static IEnumerable<AnimalGroup> CreateAnimalsCollection(bool includeEmptyGroups)
    {
        ...

        return animals;
    }

}

A CollectionView with group headers and footers