the tapgesturerecognizers doesn't work for images in the same position xamarin.forms

Question

These are my image:

the green one is over the yellow, I used a grid for it...But it makes that when I tap the green one the tap doesn't work...when they were not in the same position, the green image worked. this problem happens only in iphone devices my grid:

<Grid>

        <Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>        

        <Image BackgroundColor="Green" Source="cadastrarVoltar" Margin="10,10,0,0" VerticalOptions="Start" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start">
          <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnClose"/>
          </Image.GestureRecognizers>
        </Image>

      </Grid>

I've already tried 'InputTranparent = true' and it didn't work.

The complete code:

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:pages="clr-
    namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
         xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
         xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
         x:Class="neoFly_Montana.PopUp.CadastrarPopup"
         xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
         xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
         CloseWhenBackgroundIsClicked="False">
  <Grid>
  <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.5*"/>
  <ColumnDefinition Width="9*"/>
  <ColumnDefinition Width="0.5*"/>
  </Grid.ColumnDefinitions>

 <StackLayout Grid.Column="1" Spacing="0">

   <RelativeLayout>

    <StackLayout x:Name="stack_cadast" VerticalOptions="Center" 
     HorizontalOptions="FillAndExpand" BackgroundColor="White"

       RelativeLayout.WidthConstraint="{ConstraintExpression
                        Type=RelativeToParent,
                        Property=Width,
                        Factor=1,
                        Constant=0}"

      RelativeLayout.HeightConstraint="{ConstraintExpression
                        Type=RelativeToParent,
                        Property=Height,
                        Factor=1,
                        Constant=0}">

      <StackLayout.Spacing>
        <OnPlatform x:TypeArguments="x:Double"
            iOS="10"/>
      </StackLayout.Spacing>

      <Grid>

        <Image BackgroundColor="Yellow" InputTransparent="true" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>

        <ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0"  InputTransparent="true" VerticalOptions="Start"  HorizontalOptions="Start">
          <Image BackgroundColor="Green" Source="cadastrarVoltar">
          <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnClose"/>
          </Image.GestureRecognizers>
          </Image>
        </ContentView>

      <Button Grid.Row="0" BackgroundColor="Blue" Opacity="0.3" Grid.Column="0" Clicked="OnClose"/>

      </Grid>

      <Entry x:Name="cadastrar_entry_nome" PlaceholderColor="Black" Margin="20, 10, 10, 0" Placeholder="Seu nome completo" HorizontalOptions="Fill"/>
      <Entry x:Name="cadastrar_entry_email" PlaceholderColor="Black" Margin="20, 10, 10, 0" Placeholder="E-mail" HorizontalOptions="Fill"/>

      <StackLayout Orientation="Horizontal" Margin="20, 10, 10, 0">

        <StackLayout Spacing="0">
          <Label Text="Data de nascimento" HorizontalOptions="Center" FontSize="Micro"/>
          <DatePicker x:Name="cadastrar_date_datanasc"/>
        </StackLayout>

        <StackLayout Orientation="Horizontal" Padding="0,0,20,0" VerticalOptions="Fill" HorizontalOptions="EndAndExpand" Spacing ="20">
          <Image x:Name="cadastrar_img_fem" Scale="1" Source="femDisable">
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="FemClique"/>
            </Image.GestureRecognizers>
          </Image>

          <Image x:Name="cadastrar_img_masc" Scale="1" Source="mascDisable">
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="MascClique"/>
            </Image.GestureRecognizers>
          </Image>
        </StackLayout>

      </StackLayout>

      <StackLayout Orientation="Horizontal" Margin="20, 10, 10, 0">
        <Picker x:Name="cadastrar_picker_estado" SelectedIndexChanged="PickerEstado_SelectedindexChanged" Title="UF"/>
        <ActivityIndicator x:Name="cadastro_cidade_ind" IsVisible="False" IsRunning="True"/>
        <Picker x:Name="cadastrar_picker_cidade" IsVisible="False" Title="Cidade"/>
      </StackLayout>

      <Entry x:Name="cadastrar_entry_senha" PlaceholderColor="Black" IsPassword="true" Margin="20, 10, 10, 10" VerticalOptions="End" Placeholder="Senha" HorizontalOptions="Fill"/>
      <Label x:Name="cadastrar_lbl_feedback" FontSize="Micro" HorizontalOptions="Center" Margin="0,0,10,10" TextColor="Red" IsVisible="False"/>

      <!--Botão Cadastrar-->
      <ContentView Margin="0,20,0,0" Padding="20,20,20,20" BackgroundColor="#700B0F">
        <ContentView.GestureRecognizers>
          <TapGestureRecognizer Tapped="CadastrarClique"/>
        </ContentView.GestureRecognizers>
        <Label Text="Cadastrar" VerticalOptions="Center" FontSize="Large" HorizontalOptions="Center" TextColor="White" Style="{StaticResource labelsfont}"/>
      </ContentView>
    </StackLayout>

    <Grid HorizontalOptions="FillAndExpand"

     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                         Property=Y,
                         ElementName=stack_cadast,
                         Factor=1,
                         Constant=-42.5}"

          RelativeLayout.WidthConstraint="{ConstraintExpression
                        Type=RelativeToParent,
                        Property=Width,
                        Factor=1,
                        Constant=0}">

      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="6*"/>
        <ColumnDefinition Width="2*"/>
      </Grid.ColumnDefinitions>

      <StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">

        <ffimageloading:CachedImage BackgroundColor="Pink" VerticalOptions="End" HorizontalOptions="End" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
          <ffimageloading:CachedImage.Transformations>
            <fftransformations:CircleTransformation />
          </ffimageloading:CachedImage.Transformations>
          <ffimageloading:CachedImage.GestureRecognizers>
            <TapGestureRecognizer Tapped="ChamaPickerImage"/>
          </ffimageloading:CachedImage.GestureRecognizers>
        </ffimageloading:CachedImage>


      </StackLayout>

    </Grid>

  </RelativeLayout>

</StackLayout>

Answer 1

I was facing the same issue. I have put the second Image in ContentView like below and it's working for me.

<Grid>
    <Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>        
    <ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
        <Image BackgroundColor="Green" Source="cadastrarVoltar" VerticalOptions="Start"  HorizontalOptions="Start">
          <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnClose"/>
          </Image.GestureRecognizers>
        </Image>
    </ContentView>
</Grid>

-------- UPDATED -------

XAML code

<Grid>
    <Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>        
    <ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
        <Image BackgroundColor="Green" Source="cadastrarVoltar" VerticalOptions="Start"  HorizontalOptions="Start"/>
    </ContentView>
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="Close_Tapped"/>
    </Grid.GestureRecognizers>
</Grid>

Code behind

void Close_Tapped(object sender, System.EventArgs e)
{
    throw new NotImplementedException();
}

Answer 2

Try Absolute layout instead of grid.

<AbsoluteLayout>
    <Image BackgroundColor="Yellow" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Margin="10,10,0,0" Source="cadastrarCliqueFoto" />        
    <Image AbsoluteLayout.LayoutBounds="0,0,30,30" AbsoluteLayout.LayoutFlags="XProportional, YProportional" BackgroundColor="Green" Source="cadastrarVoltar" Margin="10,10,0,0"  VerticalOptions="Start" HorizontalOptions="Start">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnClose"/>
        </Image.GestureRecognizers>
    </Image>
</AbsoluteLayout>