Skip to content

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

MultiGrouping

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages