Padding is not work correctly in SfListview

[Lukas Sugra]

Hello,

I have component like this

If I start app I see this

You can see that scrollView is moved with context. Is it correct behaviour? I would expect that scrollView will be placed on the right edge of SfListview from top to bottom(red background) and only items(content) will be moved.

[Lakshmi Natarajan]

Hi Lukas, 

 

To perform scrolling, we use ScrollView as a child of ListView. When Padding is set for the SfListView, the padding is applied to the entire control, including the ScrollBar. This is the expected behaviour. 

 

To meet your requirements, we recommend that you set the Padding for the element loaded in the ItemTemplate (ImageTitleSubtitleListViewItem). 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Lukas Sugra]

Hello,

But if i only need top and bottom padding(before first item, after last item) and not for every item. How can i reach this? Without the use of converters that check the index or something similar.

[Lakshmi Natarajan]

Hi Lukas, 

 

You can achieve your requirement by using the converters as you have mentioned.  

 

In other ways, you can set the Margin for the ScrollView used in our SfListView. You can get the ScrollView using SfListView.GetScrollView method. 

 

Please refer to the following code snippets for more reference, 

public class Behavior : Behavior<ContentPage> 

{ 

    SfListView ListView; 

    ExtendedScrollView ScrollView; 

 

    protected override void OnAttachedTo(ContentPage bindable) 

    { 

        ListView = bindable.FindByName<SfListView>("listView"); 

        ScrollView = ListView.GetScrollView(); 

        ScrollView.Padding = new Thickness(0, 20, 0, 20); //Apply top and bottom padding 

 

        base.OnAttachedTo(bindable); 

    } 

} 

 

 

Also, apply right and left padding for the ImageTitleSubtitleListViewItem.  

 

Please refer to the following code snippets for example, 

<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}" BackgroundColor="DarkGoldenrod"> 

    <syncfusion:SfListView.ItemTemplate > 

        <DataTemplate> 

            <Grid x:Name="ImageTitleSubtitleListViewItem" BackgroundColor="Lavender" Margin="20,0,20,0"> 

                ... 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

 

Output 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan