Hello,
I am very confused with the Tap Handling in Xamarin.Forms.
Here my code:
View:
<StackLayout> <Label Text="{Binding Clicks}" /> <Grid> <Grid.GestureRecognizers> <TapGestureRecognizer Command="{Binding TapCommand}" /> </Grid.GestureRecognizers> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="50" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <BoxView Grid.Row="0" BackgroundColor="Green"/> <BoxView Grid.Row="2" BackgroundColor="Red" /> </Grid> </StackLayout>
ViewModel:
private int _clickCounter = 0; private string _clicks ; public string Clicks { get { return _clicks; } set { if (_clicks != value) { _clicks = value; OnPropertyChanged(); } } } public ICommand TapCommand { get { return new Command(Tap); } } private void Tap() { _clickCounter++; Clicks = $"Clicks:{_clickCounter}"; }
So we have a StackLayout with a inner Grid. The Grid has 3 rows (a green box, nothing, a red box). The Grid has a TapGestureRecognizer. So I expect that, if I tap on a box element of the Grid, the TapGestureRecognizer handler is triggered.
Android:
UWP:
Expected behavior:
Tap on green box => clickcounter increase
Tap on red box => clickcounter increase
Tap between the boxes => clickcounter increase.
Android behavior:
Tap on green box => clickcounter NOT increase
Tap on red box => clickcounter NOT increase
Tap between the boxes => clickcounter increase.
UWP behavior:
Tap on green box => clickcounter increase
Tap on red box => clickcounter increase
Tap between the boxes => clickcounter NOT increase.
So, where is my mistake? Or is it a bug? Thank you
// edit:
On iOS it works as the expected behavior.
Solved:
The Problem was that the Grid has no 'Backgroundcolo'r defined.
Set on each BoxView Element: InputTransparent = true
Set a Backgroundcolor at Grid-Element.
Answers
You could try to experimenting with InputTransparent="True" on your BoxViews, hopefully that will cause the taps to fall through to the grid.
That said, I have also had issues with UWP where I explicitly have to specify BackgroundColor="Transparent" on my StackPanels to make it register gestures. If that doesn't work you could try creating a transparent BoxView in the middle.
I already tested the property "InputTransparent", but there it not sensible way to use it.
Android: I have to set the property of each child element to true.
UWP: I have to set the property of each child element to false.
A transparent BoxView in the middle could fix my specific case. But in realistic cases, we need a way that a "TapHandler" (defined on parent) is triggered, if a child element is tapped.
You could also try replacing the Grid with an inner StackLayout, perhaps in combination with InputTransparent on the BoxViews?
Using other controls will not fix the problem. We can not define a "TapGestureListener" for a parent element, which should handle taps at child elements, too.
I can not believe that no one had the problem. In my option it is a very basic situation.
Using other controls will not fix the problem. We can not define a "TapGestureListener" for a parent element, which should handle taps at child elements, too.
I can not believe that no one had the problem. In my option it is a very basic situation.
Is it possible to move this topic to "Xamarin.Forms" category? I realized, that it is a Xamarin.Forms issue.
Solved:
The Problem was that the Grid has no 'Backgroundcolo'r defined.
Set on each BoxView Element: InputTransparent = true
Set a Backgroundcolor at Grid-Element.