1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to add images to a multi-group header

How to add images to a multi-group header

HI everybody! I have a sflist control with two group headers, as shown on the attached picture.

I have an Observable collection, which I use as the datasource of the list.

This is my header template on Xaml:

<sflistview:SfListView.GroupHeaderTemplate>

                        <DataTemplate>

                            <ViewCell>

                                <ViewCell.View>

                                    <StackLayout

                                        BackgroundColor="{Binding Level,Converter={StaticResource TemplateConverter}}"

                                        Padding="{Binding Level,Converter={StaticResource TemplateConverter}}">

                                        <Label

                                            Style="{DynamicResource EncabezadoGrupoLista}"

                                            Text="{Binding Key}"

                                            HorizontalTextAlignment="Start"

                                            VerticalTextAlignment="Center"

                                            Margin="3,5,3,5"/>

                                    </StackLayout>

                                </ViewCell.View>

                            </ViewCell>

                        </DataTemplate>

                    </sflistview:SfListView.GroupHeaderTemplate>

This is the Group descriptor I use on code behind. 

listaActividades.DataSource.GroupDescriptors.Add(new GroupDescriptor() { PropertyName = "MODELONAME" });

listaActividades.DataSource.GroupDescriptors.Add(new GroupDescriptor() { PropertyName = "NombReferencia"});


I need to add an image in both groups, next to the items name. MODELONAME is the data shown on orange on the attached image and "NombReferencia" is the one on light orange.

Thanks for your help!

Andres.


Attachment: Simulator_Screen_Shot__iPhone_8__20210825_at_14.02.12.png_ae601ba0.zip

7 Replies 1 reply marked as answer
LN Lakshmi Natarajan Syncfusion Team August 26, 2021 09:16 AM UTC

Hi Andres, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “How to add images to a multi-group header” from our side. We would like to inform you that you can customize the Multi-level group header in the SfListView by using converters. We have prepared a sample to update the icon in both group headers and attached the sample in the following link, 
 
 
Screenshot 
 
 
Please refer to the following code snippets to achieve your requirement, 
 
Converter: Return images for each level based on Expand and Collapse state. 
public class GroupIconConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        var group =  (parameter as StackLayout).BindingContext as GroupResult; 
 
        if (group == null) return null; 
 
        if ((bool)value) 
        { 
            if (group.Level == 1) 
                return ImageSource.FromResource("SfListViewSample.Images.GroupExpand.png"); 
            else 
                return ImageSource.FromResource("SfListViewSample.Images.SubExpand.png"); 
        } 
        else 
        { 
            if (group.Level == 1) 
                return ImageSource.FromResource("SfListViewSample.Images.GroupCollapse.png"); 
            else 
                return ImageSource.FromResource("SfListViewSample.Images.SubCollapse.png"); 
        } 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return value; 
    } 
} 
 
XAML: Bind the converters to the Image.Source property. 
<syncfusion:SfListView.GroupHeaderTemplate> 
    <DataTemplate> 
        <ViewCell> 
            <ViewCell.View> 
                <StackLayout x:Name="groupStack" BackgroundColor="{Binding Level, Converter={StaticResource groupHeaderConverter}}"  
                            Padding="{Binding Level,Converter={StaticResource groupHeaderConverter}}" 
                            Orientation="Horizontal"> 
                    <Label x:Name="label" Text="{Binding Key}"  
                        FontSize="22"                                    
                        FontAttributes="Bold"                                     
                        VerticalOptions="Center"  
                        HorizontalOptions="Start"/> 
                    <Image Source="{Binding IsExpand, Converter={StaticResource groupIconConverter}, ConverterParameter={x:Reference groupStack}}" 
                        HeightRequest="30" WidthRequest="30" 
                        HorizontalOptions="End" VerticalOptions="Center"/> 
                </StackLayout> 
            </ViewCell.View> 
        </ViewCell> 
    </DataTemplate> 
</syncfusion:SfListView.GroupHeaderTemplate> 
 
You can also refer to our online documentation to customize the GroupHeader based on level in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


AA Andres Alvarado August 26, 2021 09:26 PM UTC

Hi Lakshmi! It worked perfectly. Now I have another question. 

This is how my observable collection is created. As I stated on my previous message, the list is grouped by first MODELONAME and then NombEntidad. 

I need to set the image for the subheader based on a value inside the observablecollection, in this case IconSource. 

act.Add(new ResponsablesMisActividadesViewModel

{

       NombEntidad = res.data.Actividades[i].NombEntidad,

       MODELONAME = res.data.Actividades[i].MODELONAME,

       IconSource = "actividades.png"});

 }

Is that possible to do?


Thanks.


LN Lakshmi Natarajan Syncfusion Team August 27, 2021 05:36 AM UTC

Hi Andres, 
 
Thank you for the update. 
 
We have checked the reported query “I need to set the image for the subheader based on a value inside the observablecollection” from our side. We would like to inform you that you can achieve your requirement by getting the item data from the GroupResult.Items and return the IconSource. 
 
Please refer to the code snippets for the same, 
 
public class GroupIconConverter : IValueConverter 
{ 
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
            { 
                        var group =  (parameter as StackLayout).BindingContext as GroupResult; 
 
                        if (group == null) return null; 
 
                        if (group.Level == 1) 
                        { 
                                    if ((bool)value) return ImageSource.FromResource("SfListViewSample.Images.GroupExpand.png"); 
                                    else return ImageSource.FromResource("SfListViewSample.Images.GroupCollapse.png"); 
                        } 
                        else 
                        { 
                                    return GetIconSource(group); 
                        } 
            } 
 
            private string GetIconSource(GroupResult group) 
            { 
                        Contacts itemData = null; 
                        foreach (var item in group.Items) 
                        { 
                                    itemData = (Contacts)item; 
                                    break; 
                        } 
 
                        return itemData.IconSource; 
            } 
 
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
            { 
                        return value; 
            } 
} 
 
We have prepared a sample based on your requirement and attached in the following link, 
 
Screenshot 
 
 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Marked as answer
AA Andres Alvarado August 27, 2021 03:58 PM UTC

Hi Lakshmi! Thanks for the update.

Now I have another question haha. Based on your code,

private string GetIconSource(GroupResult group) 
            { 
                        Contacts itemData = null; 
                        foreach (var item in group.Items) 
                        { 
                                    itemData = (Contacts)item; 
                                    break; 
                        } 
                        return itemData.IconSource; 
            } 


How can I make it that I can use more than one data source? I'm going to use this helper on several lists with different data sources and observable collections. In this sample, its attached to a specific source, which would be Contacts.


Thanks again for your help


LN Lakshmi Natarajan Syncfusion Team August 30, 2021 10:39 AM UTC

Hi Andres, 
 
Thank you for the update. 
 
We would like to inform you that you can use the converter class with other data source and get the data for each model by using the type-testing operators.  
 
Please refer to the documentation regarding type-testing operator below, 
 
Please refer to the following code snippets for more reference, 
 
You can test the type of the group item with the model and return the value based on your requirement. 
private string GetIconSource(GroupResult group) 
{ 
    Contacts itemData = null; 
    foreach (var item in group.Items) 
    { 
        if(item is Contacts) 
        { 
            System.Diagnostics.Debug.WriteLine("Contacts executed"); 
            itemData = (Contacts)item; 
            return itemData.IconSource; 
        } 
 
        if (item is *ModelName*) 
        { 
            ... 
        } 
        … 
    } 
 
    return null; 
} 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


AA Andres Alvarado August 30, 2021 03:09 PM UTC

Thanks a lot Lakshmi! It worked flawlessly :D


LN Lakshmi Natarajan Syncfusion Team August 31, 2021 05:07 AM UTC

Hi Andres, 
 
Thank you for the update. 
 
We are glad that your requirement has been met on your end. Please let us know if you need further assistance. As always, we are happy to help you out. 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon