ItemSpacing affects header template margins

[Tarek Ahmed]

When setting itemspacing on ListView header margin is altered. Is this by design?              

[Muthu Kumaran Gnanavinayagam]

Hi Tarek, 

 

Thank you for contacting Syncfusion support. 

 

We have checked with the reported query “ItemSpacing alters the Margin of HeaderTemplate” from our side. We would like to let you know that the Header is also a SfListView item and while ItemSpacing is applied, it affects the Header as well as Footer Template. 

However you can overcome this by loading the SfListView inside StackLayout as below code example. 

 

Code Example[XAML]: 

        <StackLayout Orientation="Vertical"> 

            <Label Text="Header" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> 

            <listView:SfListView x:Name="listView" ItemSize="70"   

                                 ItemsSource="{Binding ContactItems}" 

                                 ItemSpacing="20,0,20,0"> 

            </listView:SfListView> 

        </StackLayout> 

 

For your assistance, we have attached the sample link below. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/133474/ze/SfListViewSample-518149006 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu Kumaran. 

[Tarek Ahmed]

Ah I thought that was the case. This solution doesn't work because it introduces a fixed header. I think you should be able to apply the cell spacing to only the item view cell that are not footer or header views? 

[Tarek Ahmed]

Can you tell how does the SFListView calcuate an item's width? 

[Muthu Kumaran Gnanavinayagam]

Hi Tarek, 

 

We have checked the reported query “Need to apply spacing for SfListView items” from our side. You can achieve your requirement by applying padding for the View(such as Grid) inside ItemTemplate instead of applying ItemSpacing to SfListView as like below code example. 

 

Code Example[XAML]: 

<listView:SfListView x:Name="listView" ItemSize="70"  ItemsSource="{Binding ContactItems}"> 

            <listView:SfListView.HeaderTemplate> 

                <DataTemplate> 

                    <ViewCell> 

                        <ViewCell.View> 

                            <Label BackgroundColor="Aqua" Text="Header" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/> 

                        </ViewCell.View> 

                    </ViewCell> 

                </DataTemplate> 

            </listView:SfListView.HeaderTemplate> 

 

             <listView:SfListView.ItemTemplate> 

               <DataTemplate> 

                 <Grid x:Name="grid" Padding="25,0,25,0"> 

                   <Image Source="{Binding ContactImage}" 

                           VerticalOptions="Center" 

                           HorizontalOptions="Center" 

                           HeightRequest="50"/> 

                 </Grid> 

               </DataTemplate> 

             </listView:SfListView.ItemTemplate> 

          </listView:SfListView> 

 

For your assistance, we have attached the sample link below. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/133474/ze/SfListViewSample5711372 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu Kumaran.