Xamarin Forms 中禁用 CollectionView 滚动功能

Question

我想禁用集合视图中的滚动。我这样做的原因是我的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,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>

- Fatikhan Gasimov

---

将scrollView移除并将UI放置在collectionView的header中。 - nevermore

Answer 1

在同一页上拥有两个滚动条并不是正确的方式。

如果你只想在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://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/

- FreakyAli

---

这不是关于禁用滚动条的问题。 - Ferenc Dajka

我认为你完全误解了这一点。他希望在“筛选”部分消失后能够滚动主题。他不希望此部分成为集合视图的标题。 - Bryce Friha

@BryceFriha想要的是一个通用的滚动条，可以滚动整个过滤器，然后再滚动下面的主题，这也是他将我的答案标记为正确的原因... - FreakyAli

@FreakyAli 绝对不是这样的。我猜他将你的答案标记为正确，是因为它“完成了任务”，但最终这可能并不是他想要的。 - Bryce Friha

如果你在谈论视差效果，那么它确实是只需要一个滚动容器就可以实现的。在视图层次结构中有两个可滚动的容器是一个不好的做法，毫无疑问！ - FreakyAli

Answer 2

你可以使用InputTransparent。

在你的情况下，我会将CollectionView包装在<ContentView>中：

<ContentView InputTransparent="True"
              x:Name="content">
                    <CollectionView ItemsSource="{Binding Items}"...>
                    ...
                    </CollectionView>
</ContentView>

在你的滚动视图中创建一个滚动事件：

<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>

然后，使用此事件，确保InputTransparent根据滚动位置进行切换：

private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
        {
            var scrollView = sender as ScrollView;
            // Get the height of your scroll view
            var contentSize = scrollView.ContentSize.Height; 
            
            // Get the max position of the scrollview    
            var maxPos = contentSize - scrollView.Height;
                
                // Compare it to the current position
                if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
                {
                    // Switch input transparent value
                    content.InputTransparent = false;
                }
                else if (Convert.ToInt16(e.ScrollY) == 0)
                {
                    content.InputTransparent = true;
                }
        }

在编程方面，如果你想要做的事情需要使用两个可滚动控件，那么这是完全可以的。我认为<CollectionView.Header>不会给你想要的结果。

希望对你有所帮助！

- Bryce Friha