Xamarin Forms ListView Grouping

The ListView control is the go to control for displaying a list of data in Xamarin Forms. It contains a number of features, one of which allows the grouping of data. This allows you to separate a list with headings. You get to style the headings however you want, just as you would with each ViewCell.

Grouped Data

Before we can display the data, we need to set it up for grouping. Let’s say you have a list of names, and you want to group them by the first letter of their last name.

First, lets create a class to hold the person’s details.

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string DisplayName
    {
        get
        {
            return $"{LastName}, {FirstName}";
        }
    }
}

Then, a way to group the data, with a heading for each list. It is a list of Person’s, with a heading property.

public class PersonList : List<Person>
{
    public string Heading { get; set; }
    public List<Person> Persons => this;
}

Here is some example data, then given to the ListOfPeople property, that we will bind to our ListView.

private List<PersonList> _listOfPeople;
public List<PersonList> ListOfPeople { get { return _listOfPeople; } set { _listOfPeople = value; base.OnPropertyChanged(); } }

protected override void OnAppearing()
{
    base.OnAppearing();

    var sList = new PersonList()
    {
        new Person() { FirstName = "Sally", LastName = "Sampson" },
        new Person() { FirstName = "Taylor", LastName = "Swift" },
        new Person() { FirstName = "John", LastName = "Smith" }
    };
    sList.Heading = "S";

    var dList = new PersonList()
    {
        new Person() { FirstName = "Jane", LastName = "Doe" }
    };
    dList.Heading = "D";

    var jList = new PersonList()
    {
        new Person() { FirstName = "Billy", LastName = "Joel" }
    };
    jList.Heading = "J";

    var list = new List<PersonList>()
    {
        sList,
        dList,
        jList
    };

    ListOfPeople = list;
}

Display the Data

Now, create a ListView, bind the ItemsSource property and set IsGroupingEnabled equal to true.

<ListView ItemsSource="{Binding ListOfPeople}"
          IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Heading}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
               <Label Text="{Binding DisplayName}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

You will see a grouped ListView as below.

groupedlistviewandroid groupedlistviewios groupedlistviewuwp

You have a DataTemplate for both the list item and the group header. You can modify each of them to suit your requirements.

When you scroll the ListView, the heading will stay at the top, until all of its children disappear from view, then the heading will disappear as well. As you can see below, the S group has collapsed and is moving out of the screen as I scroll down.

scrolledgroupedlistview

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts