Skip to content

This repository contains the sample about how to change the group header color on tap in Xamarin.Forms ListView (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/group-header-color-on-tap-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to change the group header color on tap in Xamarin.Forms ListView (SfListView)

You can change the background color of group header of SfListview at runtime with the help of converter.

You can also refer the following article.

https://www.syncfusion.com/kb/11952/how-to-change-the-group-header-color-on-tap-in-xamarin-forms-listview-sflistview

C#

Converter returns the background color for the group header based on group items.

public class GroupHeaderConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return Color.Yellow;
        var items = (value as GroupResult).Items.ToList<Contacts>().ToList();
        if (items[0].IsHeaderTapped)
            return Color.Green;
        else
            return Color.Yellow;
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

C#

In ItemTapped Event, change the model property value for the respective group header and refresh the listview item by using Listview.RefreshListViewItem

private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)
{
    var groupResult = e.ItemData as GroupResult;
    if (e.ItemType is ItemType.GroupHeader)
    {
        foreach (var item in groupResult.Items)
        {
            if (!(item as Contacts).IsHeaderTapped)
                (item as Contacts).IsHeaderTapped = true;
            else
                (item as Contacts).IsHeaderTapped = false;
        }
        listView.RefreshListViewItem(-1, -1, true);
    }
}

XAML

Bind the BackgroundColor property with GroupHeaderConverter in GroupHeaderTemplate.

<syncfusion:SfListView.GroupHeaderTemplate>
    <DataTemplate >
        <Grid x:Name="headergrid" BackgroundColor="{Binding .,
            Converter={StaticResource GroupHeaderConverter}}" >
            <Label x:Name="label" Text="{Binding Key}"  />
        </Grid>
    </DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>

Output

GroupHeaderColorOnTap

About

This repository contains the sample about how to change the group header color on tap in Xamarin.Forms ListView (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages