Bug in Horizontal SfListView?

[Anna Stuepp]

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

[Jayaleshwari N]

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. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/140645HorizontalList-1073234047  

 

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. 

 

UG link AutoFitMode Limitation with Image: https://help.syncfusion.com/xamarin/sflistview/item-size-customization#limitations  

 

Screen shot:  

 

 

 

Regards, 

Jayaleshwari N. 

[Anna Stuepp]

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]

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.  

  

Sample Link :  http://www.syncfusion.com/downloads/support/forum/140645/ze/Horizonatlistview-436268178   

  

<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]

This works, thank you

[Deivaselvan Y]

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