SyncfusionExamples / level-based-formatting-of-group-header-listview-xamarin

This example demonstrate how to apply background color for different group in xamarin.forms listview

How to format the group header for different levels of grouping in Xamarin.Forms ListView(SfListView)?

You can format the different levels of the group by binding the converter for the loaded elements to the GroupHeaderTemplate of the Xamarin.Forms SfListView.

You can also refer the following article.

https://www.syncfusion.com/kb/11685/how-to-format-the-group-header-for-different-levels-of-grouping-in-xamarin-forms

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