.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

• Filtering
• Sorting
• Selection