Horizontal Listview with a vertical group header

Question

HiIs there a way to have a horizontal listview, but keep groupings vertical, so that the group is displayed above the items as you scroll across?

Rawoof Sharief Muthuja Sherif · Answer

Hi Anthony,   
   
We have checked with the reported query “Need for Horizontal GroupHeaders when orientation of SfListView is Horizontal” from our side. We would like to let you know that when the orientation of the SfListView is horizontal the GroupHeader will be present at the beginning of the items. However you can achieve your requirement through an work around. You need to load another horizontal SfListView on top of the SfListView which is in GridLayout. You can set the BindingContext of second SfListView as first SfListView which contains GridLayout items and set its ItemsSource as Groups from DataSource of SfListView in the Loaded event of SfListView containing Grid items as like below code snippets.  
  
Code Example[C#]:  




        private void ListView_Loaded(object sender, ListViewLoadedEventArgs e)  
        {  
            listView2.BindingContext = listView;  
            listView2.ItemsSource = listView.DataSource.Groups;  
        }  
  
Then you need to set the AutoFitMode as ‘Height’ to measure the size for each item of second SfListView in QueryItemSize event of second SfListView. Measure the size for each item based on the SpanCount and ItemSize of first SfListView as like below code example.  
  
Code Example[C#]:  




        private void ListView2_QueryItemSize(object sender, QueryItemSizeEventArgs e)  
        {  
            for (int i = 0; i < listView.DataSource.Groups.Count; i++)  
            {  
                itemSize = (listView.DataSource.Groups[i].Count / gridLayout.SpanCount) * listView.ItemSize;  
                if (listView.DataSource.Groups[i].Count % 2 != 0)  
                    e.ItemSize = itemSize + listView2.ItemSize;  
                else  
                    e.ItemSize = itemSize;  
            }  
        }  
  
Then you need to scroll upper SfListView along with the lower SfListView. To do that you need to get the ScrollX position from the ScrollRows of ExtendedScrollView and in the ScrollRows Changed event you need to scroll the upper SfListView programmatically using ScrollTo method as like below.  
  
Code Example[C#]:  




  public partial class GridLayoutPage : ContentPage  
    {  
        ExtendedScrollView scrollview;  
        ScrollAxisBase scrollRows;  
        VisualContainer visualContainer;  
  
        public GridLayoutPage()  
        {  
            InitializeComponent();  
            visualContainer = listView.GetType().GetRuntimeProperties().First(p => p.Name =="VisualContainer").GetValue(listView) as VisualContainer;  
            scrollRows = visualContainer.GetType().GetRuntimeProperties().First(p => p.Name =="ScrollRows").GetValue(visualContainer) as ScrollAxisBase;  
            scrollRows.Changed += ScrollRows_Changed;  
            scrollview = visualContainer.GetType().GetRuntimeProperties().First(x => x.Name =="ScrollOwner").GetValue(visualContainer) as ExtendedScrollView;  
        }  
  
        private void ScrollRows_Changed(object sender, ScrollChangedEventArgs e)  
        {  
            listView2.ScrollTo(scrollview.ScrollX);  
        }  
     }  
  
Sample link: http://www.syncfusion.com/downloads/support/forum/137884/ze/ListViewSample328937266 
  
Please let us know if you require further assistance.  
  
Regards,  
G.Muthu Kumaran.

anthony viola · Answer

Ok thank you i will try that. Have to say thats my first question since purchasing amd i think thats the best response from any forum great quality answer there thank you

Anthony Viola · Answer

is there a way to keep the group header always in view until it changes? I also, cannot seem to figure out how i modify the appearance of the group header (listview2). The normal ItemTemplates do not seem to do anything.

Dinesh Babu Yadav · Answer

Hi Anthony, 

Apologies for the inconvenience. 

SfListView do not have a default support for the reported requirement “Need for Horizontal GroupHeaders when orientation of SfListView is Horizontal”. So, we have achieved it by a possible work around and updated you a sample in the previous update. The group header items will be scrolled parallelly when the items are scrolled in view. However, we have tried to find a possible work around for the current reported requirement but we couldn’t stick the group header items in the view as per your requirement. Since, SfListView is completely developed based on the UI Virtualization concept and we could not stick any particular item in the view. 

Regards, 
Dinesh Babu Yadav