Xamarin.Forms: how to automatically hide first CollectionView

Question

I work on a Xamarin.Forms app that will contain a page with 2 CollectionView items:

• an horizontal CollectionView that will display events
• a vertical CollectionView that will display posts

I would like that the first list is progressively hidden as soon as the user starts to scroll on the second list.

We can found this behaviour on a sample from Syncfusion: but they use a SfRotator as control for the horizontal list:

I've tried to reproduce the same behaviour on my page, but it doesn't work as expected. My horizontal list is not hidden until I scroll vertically on this first list itself. If I scroll on the second vertical list, the first list is still visible:

My XAML looks like this:

<ContentPage.Content>
    <RefreshView x:DataType="vm:NewsViewModel" 
                 IsRefreshing="{Binding IsRefreshing}"
                 Command="{Binding RefreshCommand}">
        <ScrollView>
            <StackLayout Padding="16" Spacing="16">
                <CollectionView x:Name="EventsListView"
                                ItemsSource="{Binding Events}"
                                HeightRequest="250"
                                VerticalScrollBarVisibility="Never"
                                SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal"
                                           ItemSpacing="20" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                           <ctrl:ShadowFrame BackgroundColor="Red">
                               <StackLayout x:DataType="model:Event" >
                                   <Label Text="{Binding Name}" />
                                   <Image Source="{Binding Image}" />
                               </StackLayout>
                           </ctrl:ShadowFrame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <CollectionView x:Name="NewsListView"
                                ItemsSource="{Binding News}"
                                VerticalScrollBarVisibility="Never"
                                SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Vertical"
                                           ItemSpacing="20" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                           <ctrl:ShadowFrame>
                               <StackLayout x:DataType="model:News">
                                   <Label Text="{Binding Description}" />
                                   <Label Text="{Binding Date}" />
                                   <Image Source="{Binding Image}" />
                               </StackLayout>
                           </ctrl:ShadowFrame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ScrollView>
    </RefreshView>
</ContentPage.Content>

=> Is there a way to achieve this?

Answer 1

Quick reminder that you Shouldn't use Scrollable Elements inside other Scrollable Element, it usually breaks how both work, Quoting:

Xamarin doesn't recommend using the ListView, WebView, or ScrollView inside a ScrollView. Microsoft Xamarin.Forms Official Documentation says that ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView.

And this is what happening:

The ScrollView isn't actually scrolling, the Vertical CollectionView is the one giving the Illusion that the page is scrolling, meaning that the Horizontal one is always on top.

How to fix it?

To fix this, you should remove the Vertical CollectionView and use some kind of Repeater View, this Post will guide you on how to achieve it.