.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.
-
Define the
GroupHeaderTemplate
:<DataTemplate x:Key="ListViewGroupHeaderTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Text="▸" Margin="8, 12, 0, 6" TextColor="DarkGray" FontSize="Medium"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True"> <Setter Property="Text" Value="▾" /> </DataTrigger> </Label.Triggers> </Label> <Label Margin="0, 12, 0, 6" Text="{Binding Key}" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" HorizontalOptions="Start" /> </Grid> </DataTemplate>
-
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