.NET MAUI ListView Sorting

The ListView can be used to sort the visualized data. This can be achieved by adding different SortDescriptors to its SortDescriptors collection. There are two types of descriptors shipped with our code.

PropertySortDescriptor

You can sort the data by a property value from the class that defines your business items. This descriptor exposes the following properties:

• PropertyName—Defines the string name of the property that is used to retrieve the key to sort by.
• SortOrder—Specifies sort order to ascending or descending.

DelegateSortDescriptor

This descriptor enables you to sort by a custom key (for example, some complex expression combining two or more properties) instead of being limited by the value of a single property. This descriptor exposes the following properties:

• SortOrder—Sets the sort order to ascending or descending.
• Comparer—Defines the Compare method used by the internal IComparer.

Example

Here is an example that will guide you how to use SortDescriptor in the ListView.

1. Define the ListView in XAML and add PropertySortDescriptor to its SortDescriptors collection :

<telerik:RadListView x:Name="listView" 
                     ItemsSource="{Binding Items}">
    <telerik:RadListView.BindingContext>
        <local:ViewModel/>
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.SortDescriptors>
        <telerik:ListViewPropertySortDescriptor PropertyName="Age" 
                                                SortOrder="Ascending" />
    </telerik:RadListView.SortDescriptors>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <HorizontalStackLayout>
                        <Label Text="Name:"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text=", Age:"/>
                        <Label Text="{Binding Age}"/>
                    </HorizontalStackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

2. Use the following snippet for the ViewModel class:

public class ViewModel
{
    public ViewModel()
    {
        this.Items = GetData();
    }

    public ObservableCollection<Person> Items { get; set; }

    private static ObservableCollection<Person> GetData()
    {
        var items = new ObservableCollection<Person>();

        items.Add(new Person { Name = "Tom", Age = 41 });
        items.Add(new Person { Name = "Anna", Age = 32 });
        items.Add(new Person { Name = "Peter", Age = 28 });
        items.Add(new Person { Name = "Teodor", Age = 39 });
        items.Add(new Person { Name = "Lorenzo", Age = 25 });
        items.Add(new Person { Name = "Andrea", Age = 33 });
        items.Add(new Person { Name = "Martin", Age = 36 });
        items.Add(new Person { Name = "Alexander", Age = 29 });
        items.Add(new Person { Name = "Maria", Age = 22 });
        items.Add(new Person { Name = "Elena", Age = 27 });
        items.Add(new Person { Name = "Stefano", Age = 44 });
        items.Add(new Person { Name = "Jake", Age = 31 });
        items.Add(new Person { Name = "Leon", Age = 28 });

        return items;
    }
}

3. Define a Person class:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

The following image shows the result once the data is sorted.

Bindable Sort Descriptors

The SortDescriptors collection of the ListView supports binding, which means you can modify the sort descriptors directly from the ViewModel.

To control the descriptors collections through MVVM:

1. Create a property of type ObservableCollection<SortDescriptorBase> in your ViewModel which will contain the needed sort descriptors:

public ObservableCollection<SortDescriptorBase> SortDescriptors
{
    get
    {
        return this.sortDescriptors;
    }
    set
    {
        if (this.sortDescriptors != value)
        {
            this.sortDescriptors = value;
            OnPropertyChanged();
        }
    }
}

2. Use the OneWayToSource binding mode to bind that property to the SortDescriptors property of ListView. For demonstration purposes, this ListView uses the same ViewModel as in the previous example.

<telerik:RadListView x:Name="listView"
                                 Grid.Row="2"
                                 SortDescriptors="{Binding SortDescriptors, Mode=OneWayToSource}"
                                 ItemsSource="{Binding Items}">              
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <HorizontalStackLayout>
                        <Label Text="Name:"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text=", Age:"/>
                        <Label Text="{Binding Age}"/>
                    </HorizontalStackLayout>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
</telerik:RadListView>

3. According to your preferences, add sort descriptors to the SortDescriptors collection in the ViewModel, for example:

private void UpdateExistingSortDescriptor()
{
    if (this.SortDescriptors == null)
        return;

    if (this.SortDescriptors.Count == 0)
    {
        this.SortDescriptors.Add(new PropertySortDescriptor()
        {
            PropertyName = "Day",
            SortOrder = SortOrder.Ascending
        });
    }
}

The following image shows the result:

See Also

• Grouping
• Filtering
• Selection