CollectionView禁用Xamarin表单中的滚动

问题描述

我正在尝试禁止在收藏夹视图中滚动。我要这样做的原因是XAML代码中已经有一个滚动视图。当我尝试滚动页面上的所有页面元素时，集合视图元素也会自行滚动，但我不希望这样做。

 <ScrollView>
        <StackLayout  Padding="20" Spacing="20" >
            <Frame CornerRadius="15" 
                   BackgroundColor="#A6EDB3" 
                   VerticalOptions="StartAndExpand"
                   HeightRequest="200" 
                   IsClippedToBounds="True"
                   Padding="0"   >
                <StackLayout Padding="10,5,10,5"   
                             Orientation="Horizontal"   >
                    <Image Source="settingsIcon"  
                               HeightRequest="25" 
                               WidthRequest="25" 
                               Aspect="Fill" />
                    <Label Text="Filter" 
                               FontSize="Medium" 
                               VerticalTextAlignment="Center" 
                               VerticalOptions="Center"/>
                </StackLayout>
            </Frame>
            <Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
            <CollectionView    x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Padding="0,10">
                            <Frame HasShadow="False"
                                       HeightRequest="60"
                                       CornerRadius="15" 
                                       BackgroundColor="{Binding BackgroundColor}" 
                                       HorizontalOptions="Fill" >
                                <StackLayout Orientation="Horizontal">
                                    <Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
                                    <StackLayout>
                                        <Label Text="{Binding Name}"></Label>
                                    </StackLayout>
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ScrollView>

解决方法

在同一页面上显示两个滚动条不是正确的方法。

如果您只想在collectionView上方/下方放置项目，请使用Header / Footer属性！

例如，对于当前的设计，您的CollectionView可能如下所示，并且可以按您希望的方式工作。

 <CollectionView   Padding="20"  x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
            <CollectionView.Header>
              <StackLayout  Spacing="20" >
        <Frame CornerRadius="15" 
               BackgroundColor="#A6EDB3" 
               VerticalOptions="StartAndExpand"
               HeightRequest="200" 
               IsClippedToBounds="True"
               Padding="0"   >
            <StackLayout Padding="10,5,10,5"   
                         Orientation="Horizontal"   >
                <Image Source="settingsIcon"  
                           HeightRequest="25" 
                           WidthRequest="25" 
                           Aspect="Fill" />
                <Label Text="Filter" 
                           FontSize="Medium" 
                           VerticalTextAlignment="Center" 
                           VerticalOptions="Center"/>
            </StackLayout>
        </Frame>
        <Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
        </StackLayout>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="0,10">
                        <Frame HasShadow="False"
                                   HeightRequest="60"
                                   CornerRadius="15" 
                                   BackgroundColor="{Binding BackgroundColor}" 
                                   HorizontalOptions="Fill" >
                            <StackLayout Orientation="Horizontal">
                                <Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
                                <StackLayout>
                                    <Label Text="{Binding Name}"></Label>
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

注意：您可能必须调整边距和填充属性，以使其看起来完全一样。我的代码只是一个例子。

有关CollectionView的更多信息，请检查：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/