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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bug in Horizontal SfListView?

Thread ID:

Created:

Updated:

Platform:

Replies:

140645 Oct 30,2018 02:09 PM UTC Nov 5,2018 08:01 AM UTC Xamarin.Forms 5
loading
Tags: SfListView
Anna Stuepp
Asked On October 30, 2018 02:11 PM UTC

I use the SfListView in Horizontal mode. But when I do this, it always expands the whole view vertically to the same size as horizontally.
Also I'd like to spread my images over the whole available space of the view but when I set HorizontalOptions of the ListView to FillAndExpand, the images are oriented onto the left side. Setting it to CenterAndExpand does center them but fails to Expand. Here's my code and an example screenshot.
 
           
                    BackgroundColor="Red"
                    AutoFitMode="Height"
                    Orientation="Horizontal"
                    HorizontalOptions="CenterAndExpand"
                    x:Name="SmileyList"
                    SelectionBackgroundColor="Transparent"
                    ItemsSource="{Binding Smileys, Source={x:Reference this}}"
                    SelectedItem="{Binding SelectedItem, Source={x:Reference this}}"
                    SelectionChanged="SmileyList_OnItemSelected">
               
                   
                       
                   
               
           

Screenshot: Red is SfListView, Green the Items and White is the space of the View not used by the listView

Screenshotlink: https://i.imgur.com/InkEvIr.png
View

Jayaleshwari N [Syncfusion]
Replied On October 31, 2018 10:27 AM UTC

Hi Stuepp, 
 
Thanks for Contacting Syncfusion Support. 
 
We have checked the reported query “Images are not expanded in Horizontal ListView” from our side. We have prepared the sample based on the provided information and code snippet by Setting WidthRequest and  HieghtReqest to image since the AutoFitMode is Height. The image rendered as expected with the given Width and Hieght  and the parent of image is expanded vertically. 
 
We have attached the tested sample for your reference and you can download the same from the following location. 
 
 
Could you please check with the above sample.? Whether you are reporting that the image is not expanded vertically. It does not expand as we given WidthRequest and HightRequest to it. Since that’s the limitation of AutoFitMode with Images. If not, we would request you to modify the sample or share the full xaml code snippet and the expected output as gif or video images. 
 
 
Screen shot:  
 
 
 
Regards, 
Jayaleshwari N. 


Anna Stuepp
Replied On October 31, 2018 01:36 PM UTC

I think I didn't clarify my problem good enough. My point is that I don't want the list to expand vertically. I want the hight of the whole listview to be only whats needed to display the picture but it always automatically  matches the hight with the width, which I don't want.

My other point is that I cannot expant the images horizontally to use up all the available space the view gives them. For example in my screenshot I'd like the smileys to use all the white space horizontally and spread evenly so that if I add more Smileys they'd always be centered and spread out but still fitted within the view.

So horizontally it should expand over the whole available space in the view, be centered and spread out. Vertically it should only fit the image and not more.
Thank you and sorry for the misunderstanding

Jayaleshwari N [Syncfusion]
Replied On November 1, 2018 12:25 PM UTC

Hi Stuepp 
  
We have checked the reported query form our end. In horizontal list, you can expand the image to use up available space eventually by binding ItemSize property like below. We have binded the item size which sets image size based on the screen width, if single image added in list only that image will fill into view else if more image added in view size splits based on the screen size. We have attached the sample for your reference, please find the sample from below link.  
  
  
<ContentPage>  
       <Grid>  
           <Grid.RowDefinitions>  
              <RowDefinition Height="50"/>  
           </Grid.RowDefinitions>  
           <syncfusion:SfListView x:Name="listView" ItemSize="{Binding Itemsize}" >  
              <syncfusion:SfListView.ItemTemplate>  
                  <Grid x:Name="grid" Margin="5" BackgroundColor="Red" >  
                      <Image Source="{Binding ContactImage}" Aspect="Fill" />  
                  </Grid>  
              </syncfusion:SfListView.ItemTemplate>  
           </syncfusion:SfListView>  
       </Grid>      
</ContentPage>  
  
You can make your image expand horizontally by overriding OnSizeAllocated method to set item size based on total items.  
  
public double Itemsize  
{  
   get { return size; }  
   set  
     {  
        size = value;  
        OnPropertyChanged("Itemsize");  
     }  
}  
  
protected override void OnSizeAllocated(double width, double height)  
{  
  
   base.OnSizeAllocated(width, height);  
  
   int totItems=viewModel.contactsinfo.Count;  
   viewModel.Itemsize = width / totItems;  
}  
  
 
Screen shot: 
 
 
 
Please let us know whether sample meets your requirement. If not, we would request you to explain your exact requirement clearly.  
  
Regards,  
Jayaleshwari N 


Anna Stuepp
Replied On November 2, 2018 11:49 AM UTC

This works, thank you

Deivaselvan Y [Syncfusion]
Replied On November 5, 2018 08:01 AM UTC

Hi Stuepp,

We are happy to hear that the given solution resolves your requirement. Please let us know if you need any further assistance.

Regards,
Deivaselvan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

;