.NET MAUI ListView 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.

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<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:

   <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 GroupHeader Style example, go to the SDKBrowser Demo Application and navigate to ListView -> Styling category.

See Also

• Grouping
• Item Styles
• Items StyleSelector