Group header customization

[Xetal]

I like SfListView control very much. I still have few questions to customize my list view.

1. Is there any way to bind background color of group header to object in viewmodel to have individual group header background color for each group?

 Something like this:

<syncfusion:SfListView.GroupHeaderTemplate>

     <DataTemplate>

          <ViewCell>

               <ViewCell.View>

                    <StackLayout BackgroundColor="{Binding Color}">

                         <Label Text="{Binding Key}"  FontSize="22" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start" Margin="20,0,0,0"/>

                    </StackLayout>

               </ViewCell.View>

          </ViewCell>

     </DataTemplate>

</syncfusion:SfListView.GroupHeaderTemplate>

2. Can I somehow separate groups by adding a frame for each group?

                        

[Jayaleshwari N]

Hi Xetal, 

 

Thanks for using Syncfusion Products. 

 

We have checked your queries regarding GroupHeaderItem customization. Please find the details below. 

 

# Binding Background color of GroupHeader to ViewModel property. 

 

We would like to let you know that you can achieve your requirement by binding ViewModel property with the source reference of listView. Since the GroupHeaderItem will get GroupResult as BindingContext where you does not get the ViewModel property. 

 

<syncfusion:SfListView.GroupHeaderTemplate> 

    <DataTemplate> 

        <ViewCell> 

            <ViewCell.View> 

                <Grid Padding="2" Margin="2"> 

                    <Frame Padding="2" Margin="2" OutlineColor="AntiqueWhite" HasShadow="True"> 

                        <StackLayout BackgroundColor="{Binding Path=BindingContext.Color,Source={x:Reference listView}}"> 

                            <Label x:Name="label" Text="{Binding Key}"  

                            FontSize="22"                                    

                            FontAttributes="Bold"                                     

                            VerticalOptions="Center"  

                            HorizontalOptions="Start"  

                            /> 

                        </StackLayout> 

                    </Frame> 

                </Grid> 

            </ViewCell.View>                         

        </ViewCell> 

    </DataTemplate> 

</syncfusion:SfListView.GroupHeaderTemplate> 

 

# Separate groups by adding a frame for each group 

 

You can achieve your requirement by adding frame to your GroupHeaderTemplate. 

 

<syncfusion:SfListView.GroupHeaderTemplate> 

    <DataTemplate> 

        <ViewCell> 

            <ViewCell.View> 

                <Grid Padding="2" Margin="2"> 

                    <Frame Padding="2" Margin="2" OutlineColor="AntiqueWhite" HasShadow="True"> 

                     . . . . . . . 

                     . . . . . . . 

                    </Frame> 

                </Grid> 

            </ViewCell.View>                         

        </ViewCell> 

    </DataTemplate> 

</syncfusion:SfListView.GroupHeaderTemplate> 

 

We have attached the sample for your reference. You can download from the following location. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfListViewGrouping1083787975  

 

Please let us know if this solution meets your requirement. 

 

Regards, 

Jayaleshwari N. 

[Xetal]

Actually I meant that the frame would cover all the rows in one group (see the red line in attachment picture)

And the color of the header should vary based on some category property (e.g. different on male and female) on items.

Attachment: SFListView_bd85591.zip

[Jayaleshwari N]

Hi Xetal, 

 

Thanks for the update. 

 

We have analyzed your query “Frame would cover all the rows in the group ” from our end. You can achieve your requirement by adjusting the Margin of parent and its immediate child conditionally based on the group last item and margin of parent element of GroupHeaderTemplate using Converter. 

 

We have prepared the sample for your reference. You can download from the following location. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfListView140354810284235  

 

# Color of the header would change conditionally 

 

You can achieve your requirement by adding converter to background property of element loaded in the GroupHeaderTemplate. Here we have applied based on the count of group items. you can also apply based on the category what you want to have. 

 

<DataTemplate> 

    <ViewCell> 

        <ViewCell.View>             

                <Frame Padding="1,0,1,0" OutlineColor="Black" BackgroundColor="{Binding Converter={StaticResource colorConverter}}"> 

                        <Label x:Name="label" Text="{Binding Key}"  

                        FontSize="22"                                    

                        FontAttributes="Bold"                                     

                        VerticalOptions="Center"  

                        HorizontalOptions="Start"  

                        /> 

                    </Frame> 

        </ViewCell.View>                         

    </ViewCell> 

</DataTemplate> 

 

public class ColorConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        var groupResult = value as GroupResult; 

        if (groupResult == null) 

            return value; 

 

        if (groupResult.Count % 2 == 0) 

            return Color.AliceBlue; 

        else 

            return Color.Green;             

    } 

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        return value; 

    } 

} 

 

Please let us know if you would require further assistance. 

 

Regards, 

Jayaleshwari N.