GroupHeader 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.


  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<City>()
            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:

    <telerikDataControls:RadListView x:Name="listView"
                                   ItemsSource="{Binding Cities}">
          <local:ViewModel />
              <telerikListView:ListViewTextCell Text="{Binding Name}"
                                                TextColor="#1263E5" />
          <telerikListView:ListViewGroupStyle BackgroundColor="#1263E5"
                                              BorderWidth="1" />  
          <telerikListView:PropertyGroupDescriptor PropertyName="Country" />

The following image shows the end result:

For a GroupHeader Style demo, refer to the ListView/Styling folder of the SDKBrowser MAUI application.

See Also

In this article
Not finding the help you need?