.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.