How do I set margin for SfListView content

[Pawel]

Hello,

I want to set margin on both sides of the area where item template is rendered. 

Red rectangle is header template, blue area is item template.

How can I achieve this?

Thank you,

Paweł

[Lakshmi Natarajan]

Hi Paweł,  

 

If you want to set space around the ListView, then you can set the Margin for SfListView to achieve your requirement. Please refer to the following code snippets for more reference, 

 

<syncfusion:SfListView x:Name="listView"  

                Margin="10,10,10,10" 

                ItemsSource="{Binding contactsinfo}"> 

 

If you want to generate space between each ListViewItems, then the SfListView allows specifying space between each item in the list by setting the ItemSpacing property. Also, you can set Margin for the element loaded in the ItemTemplate to achieve the same.  

 

Please refer to our user guidance document regarding the ItemSpacing in SfListView, 

UG link: https://help.syncfusion.com/xamarin/listview/viewappearance#item-spacing 

 

Please let us know if you need further assistance.  

  

Regards,  

Lakshmi Natarajan 

[Pawel]

This is not what I'm trying to achieve. I attached a picture comparing different versions:

1. SfListView without any margins
2. When I set margin on SFListView
3. I want to achieve this look, where only pictures on the bottom have left and right margins set, but not header template

I hope this clarifies it a bit.

Thank you,

Paweł

Attachment: SfListView_margin_72d575ca.zip

[Suja Venkatesan]

Hi Pawel, 

We understood your requirement which you mentioned in your previous update. Please share the below requested details, 

1. Both XAML and C# code snippets related to SfListView 

2. HeaderTemplate and ItemTemplate definition 

We will check the possibility of achieving your requirements based on the information you provide. 

Regards, 

Suja 

[Pawel]

Hello,

I attached code files. Let me know if you need more information.

Thank you,

Paweł

Attachment: sflistview_85369149.zip

[Lakshmi Natarajan]

Hi Pawel, 

 

You can achieve your requirement by customizing the ItemTemplate margin using converter. Please refer to the following code snippets for more reference, 

 

Converter: Return margin thickness based on the item index and span count. 

public class MarginConverter : IValueConverter 

{ 

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

    { 

        var item = value as Contacts; 

        var listview = parameter as SfListView; 

 

        if (item == null) 

            return null; 

 

        var itemIndex = listview.DataSource.DisplayItems.IndexOf(item) + 1; 

        var spanCount = (listview.LayoutManager as GridLayout).SpanCount; 

 

        if(itemIndex % spanCount == 1) 

        { 

            return new Thickness(15, 0, 0, 0); 

        } 

        else if(itemIndex % spanCount == 0) 

        { 

            return new Thickness(0, 0, 15, 0); 

        } 

 

        return new Thickness(0); 

    } 

 

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

    { 

        throw new NotImplementedException(); 

    } 

} 

 

 

XAML  

<ContentPage.Resources> 

    <ResourceDictionary> 

        <local:MarginConverter x:Key="MarginConverter"/> 

    </ResourceDictionary> 

</ContentPage.Resources> 

… 

<local:ListViewThreeColumns.ItemTemplate> 

    <DataTemplate> 

        <border:SfBorder Margin="{Binding ., Converter={StaticResource MarginConverter}, ConverterParameter={x:Reference listView}}"                                                                                            

                BackgroundColor="{DynamicResource Gray-100}"                                                      

                BorderColor="LightGray" 

                BorderWidth="1"                                     

                HeightRequest="{Binding Path=ItemSize, Source={x:Reference listView}}"                                              

                CornerRadius="13"                                              

                HasShadow="False"> 

 

            <ffimageloading:CachedImage Source="{Binding ContactImage}" 

                                    BackgroundColor="{DynamicResource Gray-200}" 

                                    HeightRequest="{Binding Path=ItemSize, Source={x:Reference listView}}"  

                                    CacheDuration= "50"                                                                     

                                    RetryCount= "3" 

                                    RetryDelay= "500" 

                                    DownsampleToViewSize = "true" 

                                    Aspect="AspectFill" /> 

        </border:SfBorder> 

    </DataTemplate> 

</local:ListViewThreeColumns.ItemTemplate> 

 

We have attached the tested sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/172572/ze/ListViewXamarin646233615 

 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan