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 Group Header Template

The ListView has a default group header that is displayed when grouping is applied.

The BindingContext of the GroupHeader is a complex object and it includes the following properties:

  • IsExpanded—Defines a value indicating whether the group is currently expanded (has its child items visible).
  • Items—Gets the child items of the group.
  • Key—Gets the specific for the group key.
  • Level—Gets the zero-based level (or the depth) of the group.

In addition, you can create a custom GroupHeaderTemplate to achieve the desired look when grouping the ListView.

1. Define the GroupHeaderTemplate:

<DataTemplate x:Key="ListViewGroupHeaderTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Label Text="&#x25B8;" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium">
            <Label.Triggers>
                <DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
                    <Setter Property="Text" Value="&#x25BE;" />
                </DataTrigger>
            </Label.Triggers>
        </Label>
        <Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" />
    </Grid>
</DataTemplate>

2. Set the template to the RadListView:

<telerik:RadListView x:Name="listView" 
                     ItemsSource="{Binding Cities}"
                     GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}">
    <telerik:RadListView.BindingContext>
        <local:GroupingViewModel/>
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.GroupDescriptors>
        <telerikListView:PropertyGroupDescriptor PropertyName="Country"/>
    </telerik:RadListView.GroupDescriptors>
</telerik:RadListView>

See Also

In this article