Category / Section
How to format the group header for different levels of grouping in Xamarin.Forms ListView(SfListView)?
1 min read
You can format the different levels of the group by binding the converter for the loaded elements to the GroupHeaderTemplate in Xamarin.Forms SfListView.
Xaml
Defined group header template with converter.
<syncfusion:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout BackgroundColor="{Binding Level, Converter={StaticResource groupHeaderConverter}}"
Padding="{Binding Level,Converter={StaticResource groupHeaderConverter}}">
<Label x:Name="label" Text="{Binding Key}"
FontSize="22"
FontAttributes="Bold"
VerticalOptions="Center"
HorizontalOptions="Start"
/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>
C#
Set BackgroundColor and Padding to the different group levels.
public class GroupHeaderConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (targetType.Name == "Color")
{
if ((int)value == 1)
return Color.Aqua;
else
return Color.AntiqueWhite;
}
else
{
if ((int)value == 1)
return new Thickness(5, 5, 5, 0);
else
return new Thickness((int)value * 15, 5, 5, 0);
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
Output:
