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
            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()

    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>()

    ListOfPeople = list;

Display the Data

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

<ListView ItemsSource="{Binding ListOfPeople}"
                <Label Text="{Binding Heading}" />

               <Label Text="{Binding DisplayName}" />

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.



  1. Niaz

    I want to bind Group Header with complex Type. i.e. not just simple string as described above.

    my ListView has this list as ItemSource
    public ObservableRangeCollection<Helpers.Grouping> ProductsGrouped
    i am unable to bind or call its any field, what is the best way to bind it with KEY”ShoppingCartItemHeaderDTO” object’s any field like RestaurantName

    here is my XAML code for list:

    Please let me know how i bind my complex type within Group Header Template Area

    1. Adam Pedley

      In the person list you can add more properties if you want. Then use these properties in the Group HeaderTemplate. Just assign the data, where you normally would Heading. There is no limit to the amount of properties you can add.

  2. haydar

    yes this is work if we already know the data but what if this data come from user and we need to add i group ?