Change Group Header Background Colour on Select?

Hi,

Is there any way to change the background colour of a group header in a grouped sflistview? In my tapped event handler I get the ItemData and, depending if it's a group header or normal item I'm loading a different view. So I'd like the header to match the background colour on selection of the normal list item.

My group header template is:

<syncfusion:SfListView.GroupHeaderTemplate>
    <DataTemplate>
        <ViewCell>
            <ViewCell.View>
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                    <Label Text="{Binding Key}" TextColor="White" FontSize="18" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start" />
                </StackLayout>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</syncfusion:SfListView.GroupHeaderTemplate>



1 Reply

MK Muthu Kumaran Gnanavinayagam Syncfusion Team March 1, 2018 06:22 PM UTC

Hi Alan, 
 
We have checked the reported query “Need to change the BackgroundColor of GroupHeaderTemplate for the tapped grouped header item” from our side. We regret to let you know that the reported requirement could not achieved using SfListView as the BindingContext for GroupHeaderTemplate will be of GroupResult type. So it is not possible to get the instance of the parent element inside the GroupHeaderTemplate to update its BackgroundColor while tapping that particular GroupHeader item.  
 
However we have created a sample to customize the GroupHeaderTemplate based on the expanded/collapsed state of the tapped GroupHeader item. When a group is expanded or collapsed, the IsExpand property value will be changed accordingly. So, to change the background color for the selected/ tapped group, bind the IsExpand property to background color of the parent view in the GroupHeaderTemplate and by using IValueConverter cast the value into required Color. 
 
For your reference, we have attached the sample and you can download it from the below link.  
 
 
Regards, 
G.Muthu kumaran. 


Loader.
Up arrow icon