Xamarin.Forms：如何自动隐藏第一个CollectionView

问题描述

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

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

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

我们可以在 Syncfusion 的sample上找到此行为：但是他们使用 Sfrotator 作为水平列表的控件：

我尝试在页面上重现相同的行为，但无法正常工作。在垂直滚动到第一个列表本身之前，不会隐藏我的水平列表。如果在第二个垂直列表上滚动，则第一个列表仍然可见：

我的XAML如下：

<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>

=>有没有办法做到这一点？

解决方法

快速提醒您不要在其他可滚动元素内使用可滚动元素，通常会破坏两者的工作方式，Quoting：

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

这就是发生的事情：

ScrollView 实际上不是滚动，而 Vertical CollectionView 是给出幻觉的一种该页面正在滚动，这意味着 Horizo​​ntal （水平）始终位于顶部。

如何解决？

要解决此问题，您应该删除垂直CollectionView ，并使用某种“ Repeater View”，此Post将指导您如何实现它。