.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 ListViewGroupHeader
.
To learn more about the grouping functionality of the ListView, refer to the Grouping Overview topic.
Example
-
Create a
City
class:public class City { public string Name { get; set; } public string Country { get; set; } }
-
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"} }; } }
-
Add the
RadListView
definition with aGroupHeaderStyle
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.