Image TapGestureRecognizer not firing

Question

I dont really understand why this image TapGestureRecognizer not firing.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MainMenu">   

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 20, 0, 0"
                Android="0, 0, 0, 0"
                WinPhone="0, 0, 0, 0" />
    </ContentPage.Padding>

    <ContentPage.Content>

        <Grid>

            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="0">

                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <BoxView BackgroundColor="AliceBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="5"/>
                <Image Source="itemIcon1" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" BackgroundColor="Transparent" WidthRequest="30" HeightRequest="30" />
                <Label Text = "Cpyname" FontSize="16" Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan="2"/>


                <Grid Grid.Row="1">

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width ="200"/>
                            <ColumnDefinition Width ="10"/>
                            <ColumnDefinition Width ="200"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>


                        <Grid Grid.Row="0" Grid.ColumnSpan="3">
                            <StackLayout  HeightRequest="80" Orientation="Horizontal">
                            </StackLayout>
                        </Grid>



                        <StackLayout Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical">
                            <Image x:Name="ImgRepairSvc" Source="M1.png" HeightRequest="100" WidthRequest="100"/>
                        </StackLayout>

                        <StackLayout Grid.Row="1" Grid.Column="2" WidthRequest="110" Orientation="Vertical">
                            <Image Source="M2.png" HeightRequest="100" WidthRequest="100"/>
                        </StackLayout>


                    </Grid>
                </Grid>

            </Grid>
        </Grid>

    </ContentPage.Content>
</ContentPage>

Here the code:

1) XAML :

 <StackLayout Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical">
   <Image x:Name="ImgSvc" Source="M1.png" HeightRequest="100" WidthRequest="100"/>  
</StackLayout>


2) Code behind the XAML:

public MainMenu 
{           
     InitializeComponent ();            
     SetUp();

}


 void SetUp()
 {

    ImgSvc.GestureRecognizers.Add(new TapGestureRecognizer()
    {
       Command = new Command(TapCallback)

    });

  }


  private void TapCallback()
  {
     DisplayAlert("Tap", "This is image Tap", "Ok");

  }

Compiling is successful on Emulator (Droid), but when use mouse to click the image, there is no displayAlert.

Your help is appreciated.

Thanks

Answer 1

I think most of why this is not working correctly is the chaotic structure of all the Grid and StackLayout controls you're using. You have a grid with a column that has a Width set to 40. In that column you're adding a Grid that has a column which has a Width of 200 and an Image that is 110 wide. You can see it in this image:

When I click on the Image (red) the TapGestureRecognizer only triggers when you click the left part of the image that is within the Fuchsia colored Grid element. Everything outside that is being rendered outside the parent of the Image won't trigger the TapGestureRecognizer.

My advice is to clean up your XAML because I can't imagine you're creating a layout that needs this kind of complexity with all the nested StackLayout and Grid controls.

Here's the code with a BackgroundColor set to each element in case you want to see for yourself.

 <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 20, 0, 0"
                Android="0, 0, 0, 0"
                WinPhone="0, 0, 0, 0" />
    </ContentPage.Padding>
    <ContentPage.Content>
        <Grid BackgroundColor="Yellow">
            <Grid BackgroundColor="Blue" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <BoxView BackgroundColor="AliceBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="5"/>
                <Image BackgroundColor="Olive" Source="itemIcon1" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" WidthRequest="30" HeightRequest="30" />
                <Label BackgroundColor="Gray" Text = "Cpyname" FontSize="16" Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan="2"/>

                <Grid Grid.Row="1" BackgroundColor="Teal">
                    <Grid BackgroundColor="Fuchsia">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="10"/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid BackgroundColor="Lime" Grid.Row="0" Grid.ColumnSpan="3">
                            <StackLayout HeightRequest="80" Orientation="Horizontal">
                            </StackLayout>
                        </Grid>

                        <StackLayout BackgroundColor="Maroon" Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical">
                            <Image x:Name="ImgRepairSvc" BackgroundColor="Red" Source="M1.png" HeightRequest="100" WidthRequest="100"/>
                        </StackLayout>

                        <StackLayout BackgroundColor="Purple" Grid.Row="1" Grid.Column="2" WidthRequest="110" Orientation="Vertical">
                            <Image Source="M2.png" HeightRequest="100" WidthRequest="100"/>
                        </StackLayout>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    </ContentPage.Content>