.NET MAUI ListView Delegate Group Descriptor
DelegateGroup descriptor enables you to group 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:
-
KeyExtractor—Defines the(Func<object, object)delegate which returns the property to retrieve the group key for each data item. -
SortOrder—Defines the sort order in each group to Ascending or Descending.
Let's use the same example from the previous section, and add DelegateGroupDescriptor through code instead.
1. Define the RadListView:
<telerik:RadListView x:Name="listView"
ItemsSource="{Binding Cities}"
ItemTemplate="{StaticResource ListViewItemTemplate}"
GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}">
<telerik:RadListView.BindingContext>
<local:GroupingViewModel/>
</telerik:RadListView.BindingContext>
</telerik:RadListView>
2. Include the telerik namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Create and apply a delegate for grouping the items (for example by their first letter) as following:
public DelegateGrouping()
{
InitializeComponent();
var delegateDescriptor = new ListViewDelegateGroupDescriptor
{
KeyExtractor = FirstLetterKeyExtractor
};
listView.GroupDescriptors.Add(delegateDescriptor);
}
private object FirstLetterKeyExtractor(object arg)
{
var item = arg as City;
return item?.Name.Substring(0, 1);
}
4. Add a business model:
public class City
{
public string Continent { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
5. Add a ViewModel with a collection of Cities:
public class GroupingViewModel : NotifyPropertyChangedBase
{
public ObservableCollection<City> Cities { get; set; }
public GroupingViewModel()
{
this.Cities = new ObservableCollection<City>()
{
new City() { Name = "Barcelona", Country = "Spain", Continent = "Europe"},
new City() { Name = "Madrid", Country = "Spain", Continent = "Europe" },
new City() { Name = "Rome", Country = "Italy", Continent = "Europe" },
new City() { Name = "Florence", Country = "Italy", Continent = "Europe" },
new City() { Name = "London", Country = "England", Continent = "Europe" },
new City() { Name = "Manchester", Country = "England", Continent = "Europe"},
new City() { Name = "New York", Country = "USA", Continent = "North America" },
new City() { Name = "Boston", Country = "USA", Continent = "North America" }
};
}
}
The following image shows a ListView grouped through the DelegateGroupDescriptor.
For the ListView DelegateGroupDescriptor example, go to the SDKBrowser Demo Application and navigate to ListView -> Grouping category.