Xamarin forms: GestureRecognizers not responding well to tap, need multiple taps for opening the page

Question

I have added a tap event for below UI. For image, stack layout and label I added the tap gesture event. I have done like below.

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

Also added gesture recongnizer for label from xaml.cs like below:

   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 Screenshot

But it is very difficult to open the corresponding page when tapping on the UI. I need to tap multiple times for opening the new page. Is there anything I am missing here? I didn't face this type of issue before.

Answer 1

You can improve your code has following

in xaml

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

in code behind

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());
    }


}