Xamarin：滚动视图中的 PanGestureRecognizer (Android)

Question

我很难让以下工作：我有一个水平滚动视图，其中放置了一个网格。我希望网格接收平移手势。

我的 XAML：

<ScrollView Orientation="Horizontal" VerticalOptions="Center">
        <Grid RowSpacing="3" VerticalOptions="Center" BackgroundColor="Red" Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="party.png" Grid.Row="0" Grid.Column="0" WidthRequest="30" HeightRequest="30"></Image>
                    <Label Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center" FontAttributes="Bold" Text="AUSGEHEN" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="1" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="contacts.png" Grid.Row="0" Grid.Column="2"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="2" Text="KONTAKTE" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="3" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sports.png" Grid.Row="0" Grid.Column="4"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="4" Text="SPORT" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="5" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="dating.png" Grid.Row="0" Grid.Column="6"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="6" Text="DATING" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="7" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="culture.png" Grid.Row="0" Grid.Column="8"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="8" Text="KULTUR" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="9" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="food.png" Grid.Row="0" Grid.Column="10"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="10" Text="ESSEN" TextColor="#646464" />
                    <Grid.GestureRecognizers>
                        <PanGestureRecognizer PanUpdated="OnPanUpdated" />
                    </Grid.GestureRecognizers>
                </Grid>
            </ScrollView>

问题在于滚动视图“吞下了”垂直滑动手势。这意味着水平滚动滚动视图时不会调用“OnPanUpdated”。如果我在不水平移动滚动视图的情况下小心地向上/向下滑动，则会调用“OnPanUpdated”。

我基本上想要实现的是，如果我在滚动视图内的网格上向上或向下滑动，则应该调用“OnPunUpdated”。如果我水平滑动，我希望滚动视图通常水平滚动。只要我一扫过它就调用“OnPunUpdated”，我不在乎是否调用两者。

我尝试了几个适用于 Android 的自定义渲染器，但都没有成功。

如果有人能抽出时间帮助我解决我的问题，我将不胜感激。

注意：仅在 Android 上测试。

Answer 1

有一个水平滚动视图，我想用平移手势向上滑动它。当用户向左或向右滑动时，应触发滚动视图以及向上或向下滑动时触发

您可以create a Pan Container 并将您的ScrollView 放在这个Container 中：

public class PanContainer : ContentView
{
    double x, y;

    public PanContainer()
    {
        // Set PanGestureRecognizer.TouchPoints to control the 
        // number of touch points needed to pan
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        GestureRecognizers.Add(panGesture);
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {

            case GestureStatus.Running:
                // Translate and ensure we don't pan beyond the wrapped user interface element bounds.
                Content.TranslationX = Math.Max(Math.Min(0, x + e.TotalX), -Math.Abs(Content.Width - App.ScreenWidth));
                Content.TranslationY = Math.Max(Math.Min(0, y + e.TotalY), -Math.Abs(Content.Height - App.ScreenHeight));
                break;

            case GestureStatus.Completed:
                // Store the translation applied during the pan
                x = Content.TranslationX;
                y = Content.TranslationY;
                break;
        }
    }
}

在你的.xaml：

<ContentPage.Content>
    <local:PanContainer>
        <ScrollView Orientation="Horizontal" VerticalOptions="Center">
            ...

        </ScrollView>
    </local:PanContainer>
</ContentPage.Content>

Effect.