Group Header Template

RadListView 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 could create custom GroupHeaderTemplate in order 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 And set the template to the RadListView

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

See Also

In this article
Not finding the help you need?