Xamarin 表单：GestureRecognizers 对点击响应不佳，需要多次点击才能打开页面

Question

我为下面的 UI 添加了一个点击事件。对于图像、堆栈布局和标签，我添加了点击手势事件。我已经完成了如下操作。

 <RelativeLayout Grid.Row="1">
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="End">
       <Grid>
           <Grid.ColumnDefinitions>
              <ColumnDefinition Width="33.3*" />
              <ColumnDefinition Width="33.4*" />
              <ColumnDefinition Width="33.3*" />
           </Grid.ColumnDefinitions>
           <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
              <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                  <StackLayout.GestureRecognizers>
                     <TapGestureRecognizer
                        Tapped="DailyReading"
                        NumberOfTapsRequired="1">
                     </TapGestureRecognizer>
                   </StackLayout.GestureRecognizers>
            </StackLayout>

        <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
              <Label x:Name="daily_saint_label" Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="DailySaint"
                            NumberOfTapsRequired="1">
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
              <Label x:Name="daily_quiz_label" Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="DailyQuiz"
                            NumberOfTapsRequired="1">
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
          </StackLayout>
      </Grid>
    </StackLayout>

    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="33.3*" />
                <ColumnDefinition Width="33.4*" />
                <ColumnDefinition Width="33.3*" />
            </Grid.ColumnDefinitions>
            <Image TranslationY="-20" Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailyReading"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
            <Image TranslationY="-20" Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailySaint"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
            <Image TranslationY="-20" Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Tapped="DailyQuiz"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </StackLayout>
</RelativeLayout>

还为来自 xaml.cs 的标签添加了手势识别器，如下所示：

   daily_reading_label.GestureRecognizers.Add(new TapGestureRecognizer()
    {
        Command = new Command(() => {
            Navigation.PushModalAsync(new Views.DailyReadingPage());
        })
    });

    daily_saint_label.GestureRecognizers.Add(new TapGestureRecognizer()
    {
        Command = new Command(() => {
            Navigation.PushModalAsync(new Views.DailySaintPage());
        })
    });

    daily_quiz_label.GestureRecognizers.Add(new TapGestureRecognizer()
    {
        Command = new Command(() => {
            Navigation.PushModalAsync(new Views.DailyQuizPage());
        })
    });

界面截图

但是点击UI时很难打开对应的页面。我需要点击多次才能打开新页面。我在这里有什么遗漏吗？我以前没有遇到过这类问题。

Answer 1

你可以改进你的代码有以下几点

在xml中

<ContentPage.Content>
    <Grid>
        <RelativeLayout VerticalOptions="CenterAndExpand">
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="End">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="33.3*" />
                        <ColumnDefinition Width="33.4*" />
                        <ColumnDefinition Width="33.3*" />
                    </Grid.ColumnDefinitions>
                    <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                        <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                    </StackLayout>

                    <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                        <Label x:Name="daily_saint_label" Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>

                    </StackLayout>

                    <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                        <Label x:Name="daily_quiz_label" Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>

                    </StackLayout>
                </Grid>
            </StackLayout>

            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="Start" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="33.3*" />
                        <ColumnDefinition Width="33.4*" />
                        <ColumnDefinition Width="33.3*" />
                    </Grid.ColumnDefinitions>
                    <StackLayout  Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer
                                        Tapped="DailyReading"
                                        NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_daily_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                    <StackLayout  Grid.Column="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                                Tapped="DailySaint"
                                NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                    <StackLayout  Grid.Column="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer 
                    Tapped="DailyQuiz"
                    NumberOfTapsRequired="1">
                            </TapGestureRecognizer>
                        </StackLayout.GestureRecognizers>
                        <Image TranslationY="-20" Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30"/>
                    </StackLayout>
                </Grid>
            </StackLayout>
        </RelativeLayout>
    </Grid>
</ContentPage.Content>

在代码后面

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();


    }

    public async void DailyReading(object sender, EventArgs args)
    {
        await Navigation.PushModalAsync(new DailyReadingPage());
    }

    public async void DailySaint(object sender, EventArgs args)
    {
        await Navigation.PushModalAsync(new DailyReadingPage());
    }

    public async void DailyQuiz(object sender, EventArgs args)
    {
        await Navigation.PushModalAsync(new DailyReadingPage());
    }


}

Answer 2

我所看到的原因是它们相互冲突，您只需要在一个地方添加手势识别器就足够了。

我更喜欢使用 XAML，这样我就不必无缘无故地创建私有变量，即“x:Name”

所以你做的很简单

如果下面是你的图片

 <Image TranslationY="-20" Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer 
                    Tapped="DailyReading"
                    NumberOfTapsRequired="1">
                </TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>

以下是你的标签：

   <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
          <Label x:Name="daily_reading_label" Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
              <StackLayout.GestureRecognizers>
                 <TapGestureRecognizer
                    Tapped="DailyReading"
                    NumberOfTapsRequired="1">
                 </TapGestureRecognizer>
               </StackLayout.GestureRecognizers>
        </StackLayout>

您的 DailyReading 方法如下所示：

private void DailyReading(object sender, EventArgs e)
{
  Navigation.PushModalAsync(new Views.DailyReadingPage());
}

确保您只有一个手势识别器以避免冲突