Different Tap Handling in Android and UWP?

FreefragFreefrag USMember ✭✭

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.

Best Answer

  • FreefragFreefrag US ✭✭
    Accepted Answer

    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

  • LentoManLentoMan SEMember ✭✭

    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.

  • FreefragFreefrag USMember ✭✭

    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.

  • LentoManLentoMan SEMember ✭✭

    You could also try replacing the Grid with an inner StackLayout, perhaps in combination with InputTransparent on the BoxViews?

  • FreefragFreefrag USMember ✭✭
    edited July 2017

    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.

  • FreefragFreefrag USMember ✭✭
    edited July 2017

    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.

  • FreefragFreefrag USMember ✭✭

    Is it possible to move this topic to "Xamarin.Forms" category? I realized, that it is a Xamarin.Forms issue.

  • FreefragFreefrag USMember ✭✭
    Accepted Answer

    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.

Sign In or Register to comment.