ListView Grid Layout - but with horizontal instead of vertical scrolling

[Malcolm Jack]

Is it possible to use the ListView with a grid layout - but instead to have the scroll operate more like a horizontal carousel, rather than vertically down?

So a layout like this 

... but scroll horizontally to next page instead of scrolling down in the list.

Is this possible out of the box?

[Dinesh Babu Yadav]

Hi Malcolm, 

 

Thanks for contacting Syncfusion support. 

 

We would like to inform you that you can change the orientation of SfListView to Horizontal for your requirement. We have already documented regarding ListView with horizontal orientation, please find the document and sample link for your reference. 

 

KB Documentation Link : https://www.syncfusion.com/kb/9631/how-to-create-a-horizontal-listview-in-xamarin-forms  

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/144052/ze/HorizontalList-1832613303  

 

Please let us know if you need any further assistance. 

 

Regards, 

Dinesh Babu Yadav 

 

[Malcolm Jack]

Thanks for the response Dinesh.

Perhaps I can be more clear.

The current ListView horizontal scaling scrolls like a scroll view.

What I'm needing to achieve is to span a single collection across multiple coursel view pages - so the first carousel page would contain only the items that can fit, and then you can continue to swipe right to the next page to view additional items in the collection.

I doesn't have to be a carousel + ListView - but that is the experience I need to build.

Is this possible with some combination of CarouselView + ListView (with 2 column layout)?

See this video: 1:37 

https://www.youtube.com/watch?v=MTq5ynB2nQw

the collection of chord sections are navigated via a carousel type experience.

[Gnana Priya Namasivayam]

Hi Malcolm, 

 

We have checked the reported query from our side. You can achieve your requirement by splitting the ItemsSource to content page based on item count and page count like below. We have attached the tested sample for your reference, please find the sample from below. 

 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/144052/ze/HorizontalList-Carousel2049398272  

 

 

 

public PagesViewModel(double height) 

{ 

    ScreenHeight = height; 

    int j = 0; 

 

    int itemsPerPage = (int)(height / 80) * 4; 

    int temp = itemsPerPage; 

    CarouselPages = new ObservableCollection<List<Contacts>>(); 

    var contactsviewmodel = new ContactsViewModel(); 

           

    var count = GetPageCount(height, contactsviewmodel.ContactsInfo.Count, itemsPerPage); 

 

    for (int i = 0; i < count; i++) 

    { 

       var source = contactsviewmodel.ContactsInfo.Skip(j).Take(temp); 

       var items = source.AsEnumerable().ToList().ToList(); 

       CarouselPages.Add(items); 

       j += itemsPerPage; 

    } 

} 

 

private int GetPageCount(double height, int count, int itemsperpage)   

{ 

   int i = 0; 

   int itemscount = 0; 

   while (itemscount <= count) 

   { 

     itemscount += itemsperpage; 

     i++; 

   } 

   return i; 

} 

 

 

Please let us know whether sample meets your requirement. 

 

 

 

Regards, 

Gnana Priya N 

[Malcolm Jack]

Thanks for the example.

Unfortunately the requirement is that each item template can have a variable size.

See attached updated example where I updated each contact to have variable descriptions.

So each carousel page content would need more of a flex layout system, where it only shows the variable height items that fit in the page,

rather than a grid layout where each row is the same height.

Here's another example of what would be required:

Attachment: HorizontalList_60e2367e.zip

[Dinesh Babu Yadav]

Hi Malcolm, 

 

We have checked the reported query for our end. We would like to let you know that SfListView GridLayout splits the column width equally based on the span count, because it is consider as one row which contains the items. Here, item height is taken from the highest height of the item which is loaded in the single row. So, we regret to inform you that it is not possible to provide the different height and width for each item.  

 

We have already considered reported support as an feature and added it into our feature request list. You can track the progress of the reported feature from the below link.  

 

Feedback Link : https://www.syncfusion.com/feedback/2509/staggered-layout-support-in-the-sflistview   

Note: The date for implementation of requested feature is tentative and it will be included in any of our upcoming release.     

 

Regards, 

Dinesh Babu Yadav 

 

[Malcolm Jack]

Thanks Dinesh!

yes - Flex layout with a Snap behavior to column / row (depending on orientation) would be awesome!

Malcolm

[Dinesh Babu Yadav]

Hi Malcolm, 

 

Thanks for the update. We will let you know once the feature has been rolled out and will appreciate your patience until then. 

 

Regards, 

Dinesh Babu Yadav