Item Spacing Issue for Group Items and Group header for Listview with GridLayout

[Uday Bhaskar]

When I set ItemSpacing, it is effecting the Space between Group Headers also. I have Grid Layout listview with Multiple Group Headers.

I want the custom spacing between Group Items and Group Headers (When Collapsed). But I am not able to achieve.

I have attached the zip (with Image of my Required Listview Layout)

I tried the approache suggested in https://www.syncfusion.de/forums/133474/itemspacing-affects-header-template-margins

but it didnt work.

Below is my ListView:

<StackLayout HorizontalOptions="Fill" VerticalOptions="FillAndExpand">

                        <syncfusion:SfListView

                            x:Name="listView"

                            AllowGroupExpandCollapse="True"

                            GroupHeaderSize="30"

                            GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"

                            HorizontalOptions="Fill"

                            ItemSize="50"

                            ItemSpacing="5"

                            ItemTemplate="{StaticResource TemplateSelector}"

                            ItemsSource="{Binding FilteredKiosks}"

                            SelectedItem="{Binding SelectedKiosk, Mode=TwoWay}"

                            SelectedItemTemplate="{StaticResource SelectedTemplateSelector}"

                            SelectionGesture="Tap"

                            SelectionMode="Single">

                            <syncfusion:SfListView.LayoutManager>

                                <syncfusion:GridLayout SpanCount="6" />

                            </syncfusion:SfListView.LayoutManager>

                            <syncfusion:SfListView.Behaviors>

                                <prismBehaviors:EventToCommandBehavior

                                    Command="{Binding ItemTappedCommand}"

                                    EventArgsConverter="{StaticResource sfItemTappedEventArgsConverter}"

                                    EventName="ItemTapped" />

                            </syncfusion:SfListView.Behaviors>

                        </syncfusion:SfListView>

                    </StackLayout>

Below is my one of the ItemTemplate:

<?xml version="1.0" encoding="utf-8" ?>

<ViewCell

    x:Class="QNPL.Mobile.KioskMonitor.Views.Template1"

    xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    xmlns:kioskConvert="clr-namespace:QNPL.Mobile.KioskMonitor.Convertors;assembly=QNPL.Mobile.KioskMonitorModule"

    xmlns:controls="clr-namespace:QNPL.Mobile.KioskMonitor.CustomControls;assembly=QNPL.Mobile.KioskMonitorModule">

    <controls:NeedAssistanceView>

        <StackLayout

            HorizontalOptions="Center"

            Spacing="0">

            <StackLayout HorizontalOptions="Center" VerticalOptions="Start">

                <Label

                    FontAttributes="Bold"

                    FontSize="8"

                    Text="{Binding isNew}"

                    TextColor="Black" />

            </StackLayout>

            <StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">

                <StackLayout.Resources>

                    <ResourceDictionary>

                        <kioskConvert:KioskIdConvertor x:Key="kioskIdConvertor" />

                    </ResourceDictionary>

                </StackLayout.Resources>

                <Label

                    FontAttributes="Bold"

                    FontSize="20"

                    Text="{Binding kioskId, Converter={StaticResource kioskIdConvertor}}"

                    TextColor="#FF0000" />

            </StackLayout>

            <StackLayout HorizontalOptions="Center" VerticalOptions="End">

                <StackLayout.Resources>

                    <ResourceDictionary>

                        <kioskConvert:KioskLanguageConvertor x:Key="kioskLanguageConvertor" />

                    </ResourceDictionary>

                </StackLayout.Resources>

                <Label

                    FontAttributes="Bold"

                    FontSize="8"

                    Text="{Binding language, Converter={StaticResource kioskLanguageConvertor}}"

                    TextColor="Black" />

            </StackLayout>

        </StackLayout>

    </controls:NeedAssistanceView>

</ViewCell>

Attachment: 5_3f394ecf.zip

[Dinesh Babu Yadav]

Hi Uday, 

 

Thank you for using Syncfusion Products. 

 

The reported requirement “Group header spacing for group header items in SfListView” can be achieved by using custom converter and bind it to the parent view’s Margin property in the GroupHeaderTemplate property as like below code example. And based on the Key value, you can set different spacing for each group header item. 

 

Code Example[C#]: 

public class GroupHeaderSpacingConverter : IValueConverter 

{ 

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

   { 

      //check based on the key value return the spacing for each group header. 

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

   } 

 

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

   { 

      throw new NotImplementedException(); 

   } 

} 

  

Code Example[XAML]: 

<ContentPage.Resources> 

  <ResourceDictionary> 

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

  </ResourceDictionary> 

</ContentPage.Resources> 

… 

<syncfusion:SfListView.GroupHeaderTemplate> 

  <DataTemplate x:Name="GroupHeaderTemplate" x:Key="GroupHeaderTemplate"> 

    <ViewCell> 

      <ViewCell.View> 

         <Grid BackgroundColor="Transparent" Margin="{Binding Key,Converter={StaticResource GroupHeaderSpacingConverter}}"> 

           <Grid BackgroundColor="#E4E4E4"> 

… 

           </Grid> 

         </Grid> 

      </ViewCell.View> 

    </ViewCell> 

 </DataTemplate> 

</syncfusion:SfListView.GroupHeaderTemplate> 

 

For your reference, we have attached the sample and you download it from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/137918/ze/Grouping1683855242  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav