We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to center the listview ?

Thread ID:

Created:

Updated:

Platform:

Replies:

128259 Jan 11,2017 11:41 AM UTC Jan 26,2017 05:32 AM UTC Xamarin.Forms 7
loading
Tags: SfListView
mtwsm
Asked On January 11, 2017 11:41 AM UTC

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) :

Current Result

Wanted Result

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
Replied On January 11, 2017 11:45 AM UTC

The screens' insertion failed, so one more time :

My screens (current vs wanted) :

Current Result

Wanted Result

Best regards,

Dinesh Babu Yadav [Syncfusion]
Replied On January 12, 2017 09:27 AM UTC

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,  
  
Please let us know if you require any further assistance. 
 
Regards,  
Dinesh Babu Yadav 


mtwsm
Replied On January 18, 2017 03:27 PM UTC

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 :

Mine
Yours

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
Replied On January 18, 2017 03:30 PM UTC

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

Mine

Blue = Item's Background
Green = SfListView's Background

Yours

Best regards,

Dinesh Babu Yadav [Syncfusion]
Replied On January 19, 2017 01:28 PM UTC

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
Replied On January 25, 2017 08:37 AM UTC

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 [Syncfusion]
Replied On January 26, 2017 05:32 AM UTC

Hi Toussaint, 
 
Thanks for your update. 

Ganesan V 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;