Forum Xamarin.Forms

CollectionViews inside a tab switching component inside a ScrollView

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!

Best Answer

  • lydiaxamlydiaxam Member
    Accepted Answer

    Thank you very much for your response! I implemented this solution and it was really good to learn about these sorts of animations. Unfortunately I couldn't use it for this project which has a strict design. I resolved my problem by only using 1 CollectionView with all of the header content inside of the CollectionView.Header, including the tabs. Then when changing tab I reloaded the data in the CollectionView.
    Thanks again for your help :)

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited November 2020

    Do you want to achieve the result like

    If so, you can Google:Xamarin Forms CollectionView - Hide SearchBar on Scroll
    And, Please do not use Scrollview to wrap the CollectionView, listview or other could be scrolled view, they will fight for the device focus, your application's performance will be worse.

    Xamarin Community forum will be migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forum’s new home on Microsoft Q&A!
    For more information, please refer to the sticky post.

  • lydiaxamlydiaxam Member
    Accepted Answer

    Thank you very much for your response! I implemented this solution and it was really good to learn about these sorts of animations. Unfortunately I couldn't use it for this project which has a strict design. I resolved my problem by only using 1 CollectionView with all of the header content inside of the CollectionView.Header, including the tabs. Then when changing tab I reloaded the data in the CollectionView.
    Thanks again for your help :)

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited November 2020

    Thanks for your sharing, please accept your answer(click the Yes tab under your answer), it will help others who have similar issue.


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

Sign In or Register to comment.