Xamarin.Forms:如何自动隐藏第一个CollectionView [英] Xamarin.Forms: how to automatically hide first CollectionView

问题描述

我正在使用 Xamarin.Forms应用，该应用将包含一个包含2个 CollectionView 项的页面:

• 将显示事件的水平 CollectionView
• 将显示帖子的垂直 CollectionView

我希望用户一开始在第二个列表上滚动，就逐渐隐藏第一个列表.

我们可以在:

Xamarin不建议使用ListView，WebView或ScrollView在ScrollView中. Microsoft Xamarin.Forms官方文档说ScrollViews不应该嵌套.此外，ScrollViews不应与其他提供滚动功能的控件嵌套在一起，例如ListView和WebView.

这就是发生的事情:

ScrollView 实际上不是滚动，垂直 CollectionView 是给出页面正在滚动的幻觉的图片，这意味着 Horizo​​ntal 始终位于顶部.

如何解决?

要解决此问题，您应该删除 Vertical CollectionView ，并使用某种Repeater View，即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?

解决方案

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.

这篇关于Xamarin.Forms:如何自动隐藏第一个CollectionView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！