CollectionView 在 Xamarin 表单中禁用滚动

Question

我正在尝试禁用 collection 视图中的滚动。我想这样做的原因是我的 XAML 代码中已经有一个滚动视图。当我尝试滚动页面上的所有页面元素时，collection 视图元素也会自己滚动，但我不希望这样。

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

Answer 1

在同一页上放置两个卷轴是不正确的方法。

此外，如果您只想放置项目 above/below 您的 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,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/

CollectionView 在 Xamarin 表单中禁用滚动

CollectionView disabling scrolling in Xamarin forms

scroll

collectionview

xamarin

xamarin.forms