How to center the listview ?

[mtwsm]

Hi,

I recently implemented the sfListView with a horizontal orientation. In some situations, there's only a few items in it so I would like to center the item(s) inside the listview or at least make the listview looks like it. For that, I tried to set the list's property "HorizontalOptions" to "CenterAndExpand", but it won't appear with it.

My screens (current vs wanted) :





My code :

        <StackLayout Grid.Row="0" HeightRequest="150">
          <sync:SfListView x:Name="XXX" ItemsSource="{Binding XXX}"
                           HeightRequest="150" ItemSize="150" ItemSpacing="0,0,0,0" Orientation="Horizontal" SelectionMode="None"
                           ItemHolding="SfListView_OnItemHolding" ItemTapped="SfListView_OnItemTapped">

            <sync:SfListView.ItemTemplate>
              <DataTemplate>
                <Grid Padding="10">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*" />
                    <RowDefinition Height="0.3*" />
                  </Grid.RowDefinitions>

                  <forms:CachedImage Grid.Row="0" Source="{Binding XXX, Converter={StaticResource NoEmptyCachedImageCv}}">
                    <forms:CachedImage.Transformations>
                      <transformations:CircleTransformation BorderSize="2" BorderHexColor="#000000" />
                    </forms:CachedImage.Transformations>
                  </forms:CachedImage>

                  <Label Grid.Row="1" Text="{Binding XXX}" FontAttributes="Bold" TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center" LineBreakMode="WordWrap"/>
                </Grid>
              </DataTemplate>
            </sync:SfListView.ItemTemplate>
          </sync:SfListView>

Is there any solutions for me ?
I thank you in advance and wish you a really good day !

Best regards,

[mtwsm]

The screens' insertion failed, so one more time :

My screens (current vs wanted) :





Best regards,

[Dinesh Babu Yadav]

Hi Toussaint, 

 

Thank you for using Syncfusion products. 

 

In order to achieve your requirement “Center the SfListView”, you can modify your ItemTemplate of SfListView. That is, you have to set the HorizontalOptions and VerticalOptions of the Grid to “CenterAndExpand” in the ItemTemplate like below code example.  

  

Code example[C#]:  

<StackLayout HeightRequest="150"> 

   <listView:SfListView x:Name="listView" ItemSize="90" ItemsSource="{Binding contactsinfo}" 

                           ItemSpacing="0,0,5,5" HeightRequest="150" 

                           SelectionMode="None" Orientation="Horizontal"> 

      <listView:SfListView.ItemTemplate> 

         <DataTemplate> 

            <Grid RowSpacing="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"> 

               <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" 

                           Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"> 

            </Grid> 

         </DataTemplate> 

      </listView:SfListView.ItemTemplate> 

   </listView:SfListView> 

</StackLayout> 

 

 

For your reference, we have attached the sample also. Please find the sample link below,  

http://www.syncfusion.com/downloads/support/forum/128259/ze/ListViewSample-31820196  

  

Please let us know if you require any further assistance. 

 

Regards,  

Dinesh Babu Yadav 

[mtwsm]

Hi Dinesh,

Thank you so much for your answer, sadly it didn't resolve my situation.

Not that the informations were wrong, but more like I couldn't make myself understand (not a native English speaker *).

I don't want to center the SfListView, but the items in it. For example if my list view is taking the full width of my screen and that it contains only one items, I would like that my item to be in the center of it and so in the center of the page.

Below, some screens to show you my last tests with your sample help :

Let me know if I was clear enough and if it's possible to do so.

Thank you in advance for your answer.

Best regards,

[mtwsm]

Looks like I have issue with inserting pictures. My bad !

Blue = Item's Background

Green = SfListView's Background

Best regards,

[Dinesh Babu Yadav]

Hi Toussaint, 

 

Sorry for the inconvenience caused. 

 

We have checked the reported issue “Center the SfListView Items” at our end but, we were unable to reproduce the issue with our sample. Could you please check with the below sample? If the issues still reproduces at your end, please modify the sample to reproduce the issue and update us with replication procedure or video link. So, that we could able to analyze the issue better and update you with appropriate solution. 

 

Sample Link:  

 

In the above sample, we have set the RowDefinition’ s Height as “Proportional(*)” which cause the image row to fill the available space and set the HorizontalOptions and VerticalOptions of the Grid to “CenterAndExpand” in the ItemTemplate as like below example. 

 

Code example: 

<listView:SfListView x:Name="listView" ItemSize="200" ItemsSource="{Binding contactsinfo}" 

                     ItemSpacing="0,0,0,0" 

                           Orientation="Horizontal" BackgroundColor="Green"> 

        <listView:SfListView.ItemTemplate> 

          <DataTemplate> 

            <Grid HeightRequest="300" WidthRequest="300" HorizontalOptions="CenterAndExpand"  

                  VerticalOptions="CenterAndExpand" BackgroundColor="Blue"> 

              <Grid.RowDefinitions> 

                <RowDefinition Height="*"/> 

              </Grid.RowDefinitions> 

              <Image Source="{Binding ContactImage}" HorizontalOptions="CenterAndExpand"  

                     VerticalOptions="CenterAndExpand"/> 

            </Grid> 

          </DataTemplate> 

        </listView:SfListView.ItemTemplate> 

</listView:SfListView> 

 

Please find the output image below. 

 

 

 

Please let us know if you require any further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[mtwsm]

Hi Dinesh,

I didn't have time to test it, but my colleague did and the solution didn't work. Instead he tried to modify the listview's ItemSize property and it worked like a charm !

Here is an example of our solution :

[code]

var scrollView = listView.Children[0] as ExtendedScrollView;

var itemsSource = listView.ItemsSource as ObservableCollection<MyEntityViewModel>;

if (itemsSource != null && itemsSource.Count > 0 && itemsSource.Count < 3)

{

     listView.ItemSize = scrollView.Width / itemsSource.Count;

}

[/code]

Maybe your solution was working as well, but sadly I don't have time to check it myself (lacking of time). Anyway, I would like to thank you for everything and wish you a very good day !!

Best regards,

[Ganesan V]

Hi Toussaint, 

 

Thanks for your update. 

Regards, 

Ganesan V 

[Emil]

Hi, it is old post indeed but I have tried your first sample with the newest nuget packages and XF 5 and I am not able to center horizontal listview within the Stacklayout. It always aligns on left side. I have tried to set "CenterAndExpand" on listview as well as on DataTemplate. Has something been changed in between and this not working any longer?
Just to make clear, I want to align listview itself in the center and expand it. 
So basically if there is 1 item, it should be in the center. 
If there are 10 items it should fill the horizontal space. Will that work?

[Suja Venkatesan]

Hi Emil, 

You can achieve your requirement by setting ItemSize of SfListView as scrollview width based on ItemCount in SfListView loaded event as like below code snippet. 

Code Snippet: 

private void listView_Loaded(object sender, ListViewLoadedEventArgs e) 

{ 

  var scrollView = listView.Children[0] as ExtendedScrollView; 

  var itemsSource = listView.ItemsSource as ObservableCollection<BookInfo>; 

if (itemsSource != null && itemsSource.Count > 0 && itemsSource.Count < 3) 

{ 

   listView.ItemSize = scrollView.Width / itemsSource.Count; 

} 

} 

You can decide the number of items to equally fill in the view. In the above example, the ListView will align items center upto 3 items. Otherwise, the SfListView becomes horizontally scrollable content. Please refer the below sample for your reference. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted64683797.zip 

Please let us know if you need any further assistance. 

Regards, 

Suja