在 CollectionView 中处理点击和滚动

Question

我正在尝试处理点击手势，以便当我点击 CollectionView 时，它会显示祝酒词。 但是，当我添加TapGestureRecognizer时，它会阻止我滚动集合。 我希望它既可以滚动又可以点击以打开某些东西。 到目前为止，这是我的代码：

看法：

<CollectionView 
                x:Name="eventsBox"
                ItemsSource="{Binding EventList}"
                SelectionMode="None"
                Header="Events"
                ItemsUpdatingScrollMode="KeepLastItemInView">
                <CollectionView.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding EventBoxTapCommand}"/>
                    <SwipeGestureRecognizer
                        Direction="Up"
                        Swiped="EventBoxSwiped"/>
                    <SwipeGestureRecognizer
                        Direction="Down"
                        Swiped="EventBoxSwiped"/>
                </CollectionView.GestureRecognizers>
                
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Event">
                        <HorizontalStackLayout>
                            <Label Text="{Binding EventDescription}"/>
                            <Label Text="{Binding EventTime, StringFormat=' at {0}'}"/>
                        </HorizontalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

滑动手势识别器的隐藏代码

    private void EventBoxSwiped(object sender, SwipedEventArgs e)
    {
        switch (e.Direction)
        {
            case SwipeDirection.Up:
                Console.WriteLine("Swiped Up"); 
                //Custon scroll here?
                break;

            case SwipeDirection.Down:
                Console.WriteLine("Swiped Down");
                //Custom scroll here?
                break;
        }
    }

我正在考虑通过识别滑动手势以编程方式滚动，但我还没有找到一种方法来做到这一点。 此外，点击和滑动的识别有时确实没有响应。

Answer 1

这是Gesture Recognizer Inhibits CollectionView Scrolling中跟踪的一个已知问题。您可以在那里跟进或在 Github 上创建一个新问题。

要解决此问题，您可以尝试在CollectionView之外添加一个ScrollView ，如下所示。 此外，建议Right CollectionView中添加滑动手势的Left方向。

<ScrollView>
       <CollectionView> 
                <CollectionView.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding EventBoxTapCommand}"/>
                    <SwipeGestureRecognizer
                        Direction="Left"
                        Swiped="EventBoxSwiped"/>
                    <SwipeGestureRecognizer
                        Direction="Right"
                        Swiped="EventBoxSwiped"/>
                </CollectionView.GestureRecognizers>
                
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Event">
                        <VerticalStackLayout>
                            <Label Text="{Binding EventDescription}"/>
                            <Label Text="{Binding EventTime, StringFormat=' at {0}'}"/>
                        </VerticalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
        </CollectionView>

</ScrollView>

Answer 2

在 Jason 的评论之后，我想出了一个解决方法来达到我想要的效果。 我将SelectionMode=Single添加到 CollectionView 并更改了所选项目的背景颜色，使其与应用程序的主题颜色匹配VisualStateManager 。 因此，似乎没有选择任何项目，但仍然获得点击和滚动事件。

<CollectionView 
                x:Name="eventsBox"
                ItemsSource="{Binding EventList}"
                SelectionMode="Single"
                SelectionChangedCommand="{Binding SelectItemCommand}"
                Header="Events"
                ItemsUpdatingScrollMode="KeepLastItemInView">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Event">
                        <HorizontalStackLayout>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Label Text="{Binding EventDescription}"/>
                            <Label Text="{Binding EventTime, StringFormat=' at {0}'}"/>
                        </HorizontalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

谢谢大家的帮助和信息 xD