New to Telerik UI for .NET MAUI? Start a free 30-day trial

The RadListView control is now obsolete and will be removed in the future. Use the RadCollectionView control instead. The RadCollectionView is a complete, ground-up rewrite of the ListView. The RadCollectionView offers improved performance, enhanced features, and a modernized approach to managing lists of data. The RadCollectionView incorporates all of the ListView's key features. More about the differences between both components and how to migrate to the new RadCollectionView is available in the Migrating the Telerik .NET MAUI RadListView to RadCollectionView article.

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

.NET MAUI ListView Grouping

For the ListView DelegateGroupDescriptor example, go to the SDKBrowser Demo Application and navigate to ListView -> Grouping category.

See Also

In this article