Xamarin (Frame.)GestureRecognizers doesn't work - xaml

Question

I am trying to make a TapGestureRecognizer on some frames, but when I test it, nothing happens.
xaml
<StackLayout>
<AbsoluteLayout>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sport_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Sport" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Voeding" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="495" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Slaap_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Slaap" FontSize="17" />
</StackLayout>
</StackLayout>
</Frame>
</AbsoluteLayout>
</StackLayout>
cs
void Sport_Clicked(object sender, EventArgs e)
{
new NavigationPage(new SportPage());
}
void Voeding_Clicked(object sender, EventArgs e)
{
new NavigationPage(new VoedingPage());
}
void Slaap_Clicked(object sender, EventArgs e)
{
new NavigationPage(new SlaapPage());
}
I am not getting any warnings or errors when testing. Is there something that overlaps the frames which you cannot see that causes to blocks the input?
Edit:
This is how a frame looks with the following code
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="60" WidthRequest="120" BackgroundColor="Yellow">
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Green">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</StackLayout.GestureRecognizers>
<StackLayout Orientation="Horizontal" Spacing="-10" BackgroundColor="Red">
<Label Text="Voeding" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
With this code I should be able to click the green part and get a response, but I'm not getting that? Is there a way to have something that will overlap the whole frame so I can use that to click on?

Answer 1

Cause:
Your Frame doesn't respond to your TapGestureRecognizer is caused by your TranslationY="380" TranslationX="187.5" properies. You cannot tap on the control that is out of bounds of parent view, even if this control is seen.
Translating an element outside the bounds of its parent container may
prevent inputs from working.
Solution:
Remove the TranslationY and TranslationX properties and layout your Frame in other ways.
Edited:
You can see the screenshort below, I write a simple demo and add PaleGreen as AbsoluteLayout's backgroundColor. Your Frame is out of bounds of parent view.So it will not do response to TapGestureRecognizer.
So, set FillAndExpand to AbsoluteLayout's VerticalOptions property to make sure your Frame is inside the bounds of parent view.
<AbsoluteLayout BackgroundColor="PaleGreen" VerticalOptions="FillAndExpand">
I updated a screenshot here,hope you can understand well: