I am trying to implement the following layout structure using Xamarin Forms components:
- ScrollView (which displays a sticky header when scrolling) - Title & body text - Tab Switching Component - Tab 1: CollectionView of items (load new items on ItemThresholdReached) - Tab 2: CollectionView of items (")
The desired behaviour is that when scrolling down either of the CollectionViews, the content above this (the text and tab switcher) should scroll out of view and be hidden by the sticky header. Upon scrolling back to the top of the collection view, it would scroll to the top of the page, revealing the content at the top and the sticky header would hide. Essentially, the Collection View and header content should scroll together as one scrolling view. With the above structure, the scroll isn't working because these CollectionViews are inside of an outer ScrollView.
I am using Collection View elements here because I am utilising the ItemThresholdReachedCommand to efficiently load more elements to the collection. The length of the collections will potentially be in the hundreds so performance is also important.
So far I have tried the following:
I set the header content as the header element of the Collection Views so that they would scroll as one. However this doesn't work because the header content is shared by both collection views, including the tab switcher component which wraps both Collection Views. Therefore this content cannot be placed into Collection View header elements.
I have also tried using a BindableLayout instead of CollectionView but this has none of the built-in events that Collection View has and I have read that Bindable Layout shouldn't be used for larger lists of items.
If anyone has any advice on the best way of trying to achieve this, it would be much much appreciated. At this point it feels impossible in Xamarin Forms!