.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 theCompare
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();
}
}
}
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: