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 Style

In addition to the Item Styles, the ListView enables you to modify the visual appearance of its group headers when grouping is enabled. The feature is implemented through the GroupHeaderStyle property of type ListViewGroupStyle.

The ListViewGroupStyle provides means for customizing the border as well as background and text color of the group headers. Below you can find a list of the available styling options:

• BackgroundColor (Color)—Sets the background of the group header(s).
• BorderColor (Color)—Sets the color of the border.
• BorderWidth (double)—Defines the width of the borer.
• BorderLocation (Location)—Defines an enumeration describing where the border will be visible.
• TextColor (Color)—Defines the text color of the ListView GroupHeader.

To learn more about the grouping functionality of the ListView, refer to the Grouping Overview topic.

Example

1. Create a City class:

public class City
{
    public string Name { get; set; }
    public string Country { get; set; }
}

2. Add a ViewModel class:

public class ViewModel
{
    public ObservableCollection<City> Cities { get; set; }

public ViewModel()
{
    this.Cities = new ObservableCollection&lt;City&gt;()
    {
        new City() { Name = "Barcelona", Country = "Spain"},
        new City() { Name = "Madrid", Country = "Spain"},
        new City() { Name = "Rome", Country = "Italy"},
        new City() { Name = "Florence", Country = "Italy"},
        new City() { Name = "London", Country = "England"},
        new City() { Name = "Manchester", Country = "England"},
        new City() { Name = "New York", Country = "USA"},
        new City() { Name = "Boston", Country = "USA"}
     };
}


}

3. Add the RadListView definition with a GroupHeaderStyle applied:

<telerik:RadListView x:Name="listView"
                     ItemsSource="{Binding Cities}">
    <telerik:RadListView.BindingContext>
        <local:ViewModel />
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTextCell Text="{Binding Name}"
                                      TextColor="#1263E5" />
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
    <telerik:RadListView.GroupHeaderStyle>
        <telerik:ListViewGroupStyle BackgroundColor="#1263E5"
                                    TextColor="#AAC7F6"
                                    BorderColor="#0A3A82" 
                                    BorderWidth="1" />  
    </telerik:RadListView.GroupHeaderStyle>
    <telerik:RadListView.GroupDescriptors>
        <telerik:ListViewPropertyGroupDescriptor PropertyName="Country" />
    </telerik:RadListView.GroupDescriptors>
</telerik:RadListView>

The following image shows the end result:

For a Group Header Style example, go to the SDKBrowser Demo Application and navigate to ListView -> Styling category.

See Also

• Grouping
• Item Styles
• Items Style Selector