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

.NET MAUI ListView Porperty Group Descriptor

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

  • PropertyName—Defines the string name of the property you want to group by.
  • SortOrder—Defines the sort order in each group to Ascending or Descending.

Add the following business object:

public class City
    public string Continent { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }

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" }

Group the Cities by the Country property through the PropertyGroupDescriptor:

<telerik:RadListView x:Name="listView" ItemsSource="{Binding Cities}"
                         ItemTemplate="{StaticResource ListViewItemTemplate}"
                         GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
                         GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}">
        <telerik:ListViewPropertyGroupDescriptor PropertyName="Country"/>

Add the Templates definition in the page resources:

    <DataTemplate x:Key="ListViewItemTemplate">
                <Grid HeightRequest="40" Padding="28, 0, 0, 0">
                    <Label Text="{Binding Name}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
    <DataTemplate x:Key="ListViewGroupHeaderTemplate">
        <Grid HeightRequest="40" BackgroundColor="#F1F2F5">
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            <Label Text="&#xE806;" Margin="8, 0, 0, 0" TextColor="DarkGray" FontFamily="TelerikFontExamples" FontSize="Medium" VerticalOptions="Center">
                    <DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
                        <Setter Property="Text" Value="&#xE80D;" />
            <Label Margin="8, 0, 0, 0" Text="{Binding }" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" VerticalOptions="Center" />
    <telerik:ListViewGroupStyle x:Key="ListViewGroupHeaderStyle" BackgroundColor="Transparent" />

Include the telerik namespace:


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

See Also

In this article
Not finding the help you need?