How to change GroupHeader color based on theme in Xamarin.Forms ListView (SfListView)
The Xamarin.Forms SfListView allows you to add light and dark themes using the resource keys. You can find all the keys for SfListView control in this documentation. The ListViewItem background will be updated by default based on the theme. For GroupHeaderItem, you can change BackgroundColor by using the custom resource dictionary.
XAML
Define SyncfusionThemeDictionary, add custom resource dictionary and merge it to the theme resource dictionary using MergedDictionaries.
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:syncTheme="clr-namespace:Syncfusion.XForms.Themes;assembly=Syncfusion.Core.XForms" x:Class="ListViewXamarin.App"> <Application.Resources> <syncTheme:SyncfusionThemeDictionary> <syncTheme:SyncfusionThemeDictionary.MergedDictionaries> <!-- Theme resource dictionary --> <syncTheme:DarkTheme /> <ResourceDictionary> <Color x:Key="GroupHeaderBackgroundColor">Red</Color> </ResourceDictionary> </syncTheme:SyncfusionThemeDictionary.MergedDictionaries> </syncTheme:SyncfusionThemeDictionary> </Application.Resources> </Application>
XAML
To update the text color of the ListViewItem, bind the SfListViewForegroundColor key to Label.TextColor property. For GroupHeaderItem, bind the BackgroundColor of the element loaded in the GroupdHeaderTemplate with the custom group header resource key. Also, set the group header text color with the SfListViewGroupHeaderForegroundColor key.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
x:Class="ListViewXamarin.MainPage">
<ContentPage.BindingContext>
<local:ContactsViewModel/>
</ContentPage.BindingContext>
<ContentPage.Behaviors>
<local:Behavior/>
</ContentPage.Behaviors>
<ContentPage.Content>
<StackLayout>
<Button Text="Change theme" x:Name="ThemeButton"/>
<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
<syncfusion:SfListView.ItemTemplate >
<DataTemplate>
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
<Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
<Label LineBreakMode="NoWrap" TextColor="{DynamicResource SfListViewForegroundColor}" Text="{Binding ContactName}"/>
<Label Grid.Row="1" Grid.Column="0" TextColor="{DynamicResource SfListViewForegroundColor}" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
<syncfusion:SfListView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="{DynamicResource GroupHeaderBackgroundColor}" >
<Label Text="{Binding Key}" FontSize="22" TextColor="{DynamicResource SfListViewGroupHeaderForegroundColor}" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start" Margin="20,0,0,0" />
</StackLayout>
</DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#
In the Button.Clicked event, change the theme by removing the resource dictionary from the MergedResourceDictionary and add the new theme. Also, change the key value of the group header based on theme.
namespace ListViewXamarin
{
public class Behavior : Behavior<ContentPage>
{
SfListView ListView;
Button ThemeButton;
protected override void OnAttachedTo(ContentPage bindable)
{
ListView = bindable.FindByName<SfListView>("listView");
ThemeButton = bindable.FindByName<Button>("ThemeButton");
ThemeButton.Clicked += ThemeButton_Clicked;
base.OnAttachedTo(bindable);
}
private void ThemeButton_Clicked(object sender, EventArgs e)
{
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
var darkTheme = mergedDictionaries.OfType<DarkTheme>().FirstOrDefault();
if (darkTheme != null)
{
mergedDictionaries.Remove(darkTheme);
mergedDictionaries.Add(new LightTheme());
var groupHeaderColor = mergedDictionaries.OfType<ResourceDictionary>().FirstOrDefault();
groupHeaderColor["GroupHeaderBackgroundColor"] = Color.LightGray;
}
else
{
mergedDictionaries.Remove(mergedDictionaries.OfType<LightTheme>().FirstOrDefault());
mergedDictionaries.Add(new DarkTheme());
var groupHeaderColor = mergedDictionaries.OfType<ResourceDictionary>().FirstOrDefault();
groupHeaderColor["GroupHeaderBackgroundColor"] = Color.Red;
}
}
}
}
Output
