The
RadListView
control is now obsolete and will be removed in the future. Use the RadCollectionView control instead. TheRadCollectionView
is a complete, ground-up rewrite of the ListView. TheRadCollectionView
offers improved performance, enhanced features, and a modernized approach to managing lists of data. TheRadCollectionView
incorporates all of the ListView's key features. More about the differences between both components and how to migrate to the newRadCollectionView
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="▸" 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>
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>