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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListView Grid Layout - but with horizontal instead of vertical scrolling

Thread ID:

Created:

Updated:

Platform:

Replies:

144052 Apr 16,2019 09:00 AM UTC Apr 25,2019 04:33 AM UTC Xamarin.Forms 7
loading
Tags: SfListView
Malcolm Jack
Asked On April 16, 2019 09:00 AM UTC

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 [Syncfusion]
Replied On April 17, 2019 11:03 AM UTC

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


Malcolm Jack
Replied On April 18, 2019 12:01 PM UTC

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 
the collection of chord sections are navigated via a carousel type experience.

Gnana Priya Namasivayam [Syncfusion]
Replied On April 19, 2019 03:46 AM UTC

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. 
 
 
 
 
 
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
Replied On April 23, 2019 10:42 AM UTC

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 [Syncfusion]
Replied On April 24, 2019 06:23 AM UTC

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.  
 
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
Replied On April 24, 2019 09:15 PM UTC

Thanks Dinesh!

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

Malcolm

Dinesh Babu Yadav [Syncfusion]
Replied On April 25, 2019 04:33 AM UTC

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 


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

Live Chat Icon For mobile
Live Chat Icon