.NET MAUI GestureRecognizers not working on certain controls

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It’s more difficult to complete my work]
The following is working perfectly fine:

<Frame>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ExecuteCommand}" />
  </Frame.GestureRecognizers>
</Frame>

While this is not working:

<CheckBox>
  <CheckBox.GestureRecognizers >
    <TapGestureRecognizer Command="{Binding ExecuteCommand}"/>
  </CheckBox.GestureRecognizers>
</CheckBox>

The command is not executed.

The same goes for the Switch.

If this is intentional, what would be the proper way to bind a command to the Checkbox or Switch?

---

Original Comments

Feedback Bot on 7/17/2022, 08:01 PM:

(private comment, text removed)

---

Original Solutions

(no solutions)

Depends on

• VerticalStackLayout inside Scrollview: Button at the bottom not clickable on IOS #14257
• Gestures don't work on Label Spans #4734
• TapGesture on Listview does not fire #16622
• SwipeGesture is not working on a listview #16624

[rmarinho]

What platform is this? I tested on Windows, Android and iOS and is working as expected the TapGestures is called, the problem is if you add the ta gesture on iOS and Android the

Windows - works fine
Android - The checkbox doesn't get check if you add the TapGesture
iOS - The checkbox doesn't get check if you add the TapGesture

[rmarinho]

Code use to test:

 <StackLayout>
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red">
            <Frame.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ExecuteCommand}" />
            </Frame.GestureRecognizers>
        </Frame>
        <CheckBox Background="Yellow">
            <CheckBox.GestureRecognizers >
                <TapGestureRecognizer Command="{Binding ExecuteCommand}"/>
            </CheckBox.GestureRecognizers>
        </CheckBox>
    </StackLayout>

 ExecuteCommand = new Command(() =>
 {
        System.Diagnostics.Debug.WriteLine($"{ExecuteCommand} Called");
 });

[otium99]

@rmarinho If the TapGestureRecognizer blocks the state change of the control, what would be the correct way of attaching a command to the Switch or the Checkbox?

[rmarinho]

@otium99 yeah, the team needs to discuss this but we need to add a new api like CheckCommand to th checkbox .. in the meanwhile you should use codebehind and subscribe the event and call your command from there.

[Symbai]

Doesn't work on ListView as well. The Tapped event is never raised.

            <ListView.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
                              NumberOfTapsRequired="2" />
            </ListView.GestureRecognizers>

[SunshineSpring666]

Bug: Putting Frame inside ListView's ItemTemplate blocks tap action to trigger on a ListView item.

[BenderNK]

Embedding the gesture in a CollectionView also doesn't work.

<CollectionView>
  ...
  <CollectionView.EmptyView>
    <ContentView>
       <Frame>
         <Frame.GestureRecognizers>
           <!-- Nothing ever happens -->
           <TapGestureRecognizer Tapped="DidClickAdd" />
         </Frame.GestureRecognizers>
      </Frame>
    </ContentView>
  <CollectionView.EmptyView>
<CollectionView>

But take the ContentView outside of the CollectionView and make it the only descendant of a page for example, then it works:

<ContentView>
   <Frame>
     <Frame.GestureRecognizers>
       <!-- This is fine, working as expected -->
       <TapGestureRecognizer Tapped="DidClickAdd" />
     </Frame.GestureRecognizers>
  </Frame>
</ContentView>

Edit: Nov/17/22: see the comment here

[abcox]

@BenderNK this is also my experience. Have you discovered any work-around? Thanks!

[BenderNK]

Hello @abcox,
Unfortunately, I didn't discover a work-around. My strategy was for it get addressed in a future release. However, the app started to recognize the tap gesture all of a sudden. I didn't change my MAUI version or anything like that. I honestly don't know what caused the sudden change in behavior. The only thing I can think of is that I cleaned the build and rebuilt-it from scratch. Perhaps some caching issue in the intermediary files?

[vorba]

@BenderNK thanks for the feedback. what i am doing for now is using a transparent rectangle

[PankajIATOCS]

Command event not working for Span.GestureRecognizers.

                          <Label HorizontalTextAlignment="Center">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="By continuing, you agree to our"/>
                                            <Span Text=" Terms of services," TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding NavigateToTermsofServicesCommand}"/>
                                                </Span.GestureRecognizers>
                                            </Span>
                                            <Span Text=" Privacy Policy" TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding NavigateToPrivacyPolicyCommand}"/>
                                                </Span.GestureRecognizers>
                                            </Span>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>

**Code of ViewModel.**
[RelayCommand]
        async Task NavigateToTermsofServices()
        {

        }

[PankajIATOCS]

### Tapped event not working for Span.GestureRecognizers.

                         <Label HorizontalTextAlignment="Center">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="By continuing, you agree to our"/>
                                            <Span Text=" Terms of services," TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"  />
                                                </Span.GestureRecognizers>
                                            </Span>
                                            <Span Text=" Privacy Policy" TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>
                                                </Span.GestureRecognizers>
                                            </Span>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                        </Label>

 **###Code Behind**

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {

    }

    private void TapGestureRecognizer_Tapped_1(object sender, TappedEventArgs e)
    {

    }

[tatee13]

Not Work Too

  <CollectionView Grid.Row="2" Grid.ColumnSpan="2"
                            ItemsSource="{Binding Items}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="{x:Type x:String}">
                        <SwipeView>
                            <SwipeView.RightItems>
                                <SwipeItems>
                                    <SwipeItem Text="Delte"
                                               BackgroundColor="Red"
                                                Command="{Binding Source={RelativeSource AncestorType={x:Type xx:MainViewModel}}, Path=DeleteCommand}"
                                                CommandParameter="{Binding .}"/>
                                </SwipeItems>

                            </SwipeView.RightItems>
                            <Grid Padding="0,5">
                                <ListView>
                                    <ListView.GestureRecognizers>
                                        <TapGestureRecognizer 
                                       Command="{Binding Source={RelativeSource AncestorType={x:Type xx:MainViewModel}}, Path=MMMCommand}"
                                       CommandParameter="{Binding .}"/>
                                    </ListView.GestureRecognizers>
                                </ListView>
                                <Frame>
                                    <Label Text="{Binding .}"
                                       FontSize="24"/>
                                </Frame>
                            </Grid>
                        </SwipeView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

[danheinz]

No gestures work on the Map control either.

<Map x:Name="LocationsMap" 
	IsShowingUser="True" 
	IsZoomEnabled="True"                                   
	IsEnabled="True" 
	IsScrollEnabled="True" 
	MapType="Street"
	ItemsSource="{Binding MapPins}"
	IsVisible="{Binding IsMapVisible}"
	Loaded="OnMapLoaded">
	<Map.GestureRecognizers>
		<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
	</Map.GestureRecognizers>
	<Map.ItemTemplate>
		<DataTemplate x:DataType="Pin">
			<Pin Location="{Binding Location}"
				Address="{Binding Address}"
				Label="{Binding Label}"
				InfoWindowClicked="Pin_InfoWindowClicked"/>
		</DataTemplate>
	</Map.ItemTemplate>
</Map>

[Laim]

Just to add to this issue. I'm seeing the same issue when using Tap Gesture's inside of a Frame that is inside of a CollectionView.

XAML

<Grid Margin="20">
    <ScrollView>
        <CollectionView ItemsSource="{Binding TaskList, Mode=TwoWay}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid HeightRequest="120" Margin="0" Padding="0" RowSpacing="0">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="8"/>
                        </Grid.RowDefinitions>

                        <Frame BackgroundColor="#FAFAFA" CornerRadius="10">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding TaskClickedCommand}" CommandParameter="{Binding .}"/>
                            </Frame.GestureRecognizers>
                                        
                            <StackLayout Orientation="Vertical">
                                <Label ... />

                                <Label ... />

                                <Label ... />
                            </StackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
</Grid>

csharp

[RelayCommand]
private void TaskClicked(TaskModel task)
{
    Console.WriteLine(task.Name);
    Console.WriteLine("Task Clicked");
    System.Diagnostics.Debug.WriteLine("Task Clicked");
}

I'm using the CommunityToolkit.MVVM, in case it's important. I tried it without the top Grid and ScrollView and same results, the command is never called.

Edit:

I may just be an idiot. I changed:

<Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding TaskClickedCommand}" CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>

to

<Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding Path=TaskClickedCommand, Source={RelativeSource AncestorType={x:Type viewModel:HomeViewModel}}}" CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>

And added viewModel to my ContentPage like the below and it's triggering now.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewModel="clr-namespace:NameRemoved.ViewModel"
    x:Class="NameRemoved.View.HomeView"
    Title="Home">

[sangyuxiaowu]

Command event not working for Span.GestureRecognizers.

                          <Label HorizontalTextAlignment="Center">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="By continuing, you agree to our"/>
                                            <Span Text=" Terms of services," TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding NavigateToTermsofServicesCommand}"/>
                                                </Span.GestureRecognizers>
                                            </Span>
                                            <Span Text=" Privacy Policy" TextDecorations="Underline">
                                                <Span.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding NavigateToPrivacyPolicyCommand}"/>
                                                </Span.GestureRecognizers>
                                            </Span>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>

**Code of ViewModel.**
[RelayCommand]
        async Task NavigateToTermsofServices()
        {

        }

I have the same need as yours, Span.GestureRecognizers does not work, did you find another solution?

[Laim]

Is your repo public? Can have a look. Seems to be very hit or miss sadly.

[sangyuxiaowu]

Is your repo public? Can have a look. Seems to be very hit or miss sadly.

It is public, and it is a small application for practice.
https://github.com/sangyuxiaowu/MuYu/blob/main/MuYu/PrivacyPolicy.xaml#L38

[Greg-Bates-Trimble]

Is there any idea when this is going to get looked at or resolved? This is a serious issue which blocks any iOS releases.

[npostma]

Same issue with the carousel view. I wanted to use the tapGesture instead of custom gestures (I come from Xamarin, and do not want to use the custom renders anymore, which i would need for custom gestures). So for now i hoped i could use the GestureRecognizers TapGestureRecognizer. What i found out is that Tapped="Method" gets called. But then i don't know what element is tapped. So i want to use Command="{Binding MyCommand, Source={x:Reference this}}" it compiles fine, but the command in my ViewModel does not get called.

As a workaround I tried to create a custom control for the Image, which has a reference to the viewmodel but for some reason if the Method is called defined in Tapped="Method" the param object is the image but object.RefToViewModel is always null and i am sure that the references are set when inserted in the collection.

Tested on android, not tested on iOS because i need something that works for both platforms.

[arahmancsd]

Same here with Image inside a Grid in CollectionView DataTemplate.

        <Grid RowDefinitions="*,Auto"
            IsClippedToBounds="True"
            RowSpacing="10"
            Background="Transparent"
            CompressedLayout.IsHeadless="True"
            >

            <Image Grid.Row="0" WidthRequest="80" HeightRequest="80"
                   Source="{Binding ImageName}">
                <Image.Clip>
                    <EllipseGeometry Center="40,40" RadiusX="40" RadiusY="40"/>
                </Image.Clip>
                <Image.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding BindingContext.NavigateToPageCommand, Source={Reference this}}"
                        CommandParameter="{Binding .}"/>
                </Image.GestureRecognizers>
            </Image>

            <Label Grid.Row="1" Text="{Binding Name}"
                   InputTransparent="True"
                   FontSize="15"
                   HorizontalTextAlignment="Center"
                   />
        </Grid>
    </DataTemplate>

[SalimiHabib]

Same problem in DataTemplate .
Not working in any way .

<DataTemplate x:Key="Template1">
        <Border Margin="2" StrokeThickness="0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="5" />
            </Border.StrokeShape>
            <Grid HandlerChanged="Grid_HandlerChanged">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer CommandParameter="{Binding Path=BindingContext, Source={RelativeSource AncestorType={x:Type Border}}}" Tapped="TapGestureRecognizer_Tapped" />
                </Grid.GestureRecognizers>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                

[simonDev2021]

I have just created a new MAUI app and added a Carousel control. It works absolutely fine until I try adding a tap gesture to it. When I start it the left right scrolling is completely unresponsive in the android phone emulator, but the tap gesture works fine both in code and xml. Can any one tell me if MAUI simply doesn't support adding gestures to some controls? If so shouldn't Microsoft state that in the documentation. Alternatively perhaps the tap gesture overrides the built in left/right scroll of the control. I tried scroll gesture with the same result. I am new to MAUI, so any advice would be appreciated.

[Symbai]

The issue here is about gestures not working. In your case where gestures are working but a control isn't, you should create a new issue.

[kojini]

I have the same issue. As @Greg-Bates-Trimble said, when the visibility of control(s) (not necessarily the control that has the tap gesture) is changed, gesture stops working.
For now I stopped chaging the visibility of a control as a workaround, but this bug could be a real pain.

[mosessaur]

Thought to share my workaround on this issue.
Create TapGestureRecognizer as low as possible in your view hierarchy. It resulted in the command being triggered as expected
They may result in duplicating/copying TapGestureRecognizer to multiple controls.
Not Ideal, but for the time being it work for me.
I didn't test all possible scenarios for this. But I managed to get TapGestureRecognizer working on one of my custom controls by replicating TapGestureRecognizer 3 times on 3 controls

[maslewandowski]

I use the tapgesturerecognizer nested in a collectionview and the command does not execute, if the item is not visible at loading time.
So when i add many items to the bound observablecollection, the command is only executed for those items that are visible after that process.

[thoys]

Why is this issue not getting attention? This seems like a very basic feature that Maui needs to support. I keep on fighting with workarounds for Maui, it's annoying.

[Laim]

Why is this issue not getting attention? This seems like a very basic feature that Maui needs to support. I keep on fighting with workarounds for Maui, it's annoying.

Because unfortunately MAUI doesn’t have nearly enough resource assigned to it at Microsoft.

[Vroomer]

    <Border>
        <Border.GestureRecognizers>
            <!--<TapGestureRecognizer Tapped="Item_Selected" />-->
        </Border.GestureRecognizers>
    </Border>

This code as a DataTemplate for CollectionView caused items to be invisible. Took some time to find the issue, which is very frustrating. I tried to change the event to command - items are now visible, but the command doesn't fire. Tried switching Border to HorizontalStackLayout, but it has the same issue. I have no workaround. This definitely doesn't get the attention it should be getting!

[npostma]

@Vroomer I have it working on an image (Android and iOS). This code works for me, note i am on .NET7. Would be helpfull if you add more information about what you are using and for what platform.

<CarouselView.ItemTemplate>
    <DataTemplate
        x:DataType="vme:TestViewModel"
    >
        <Border 
            BackgroundColor="Transparent"
            Margin="20,0,20,0"
            Padding="0,0,0,0"
        >
            <Grid 
                Margin="0"
                Padding="0"
                VerticalOptions="Center"
                HorizontalOptions="Center"
            >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <ActivityIndicator 
                    Grid.Column="0"
                    Grid.Row="0"
                    IsRunning="{Binding IsLoading}" 
                    IsVisible="{Binding IsLoading}" 
                    Scale="1.5"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                />

                <Border 
                    Grid.Column="0"
                    Grid.Row="0"
                    Margin="0" 
                    Padding="0" 
                    BackgroundColor="Transparent"
                >
                    <Image 
                        Source="{Binding Image.Source}"
                        Aspect="AspectFill"
                        HeightRequest="{Binding Image.HeightRequest}"
                        BackgroundColor="Transparent"
                        VerticalOptions="Center"
                        >
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ClickGestureCarouselOnlyCommand}" />
                        </Image.GestureRecognizers>
                    </Image>
                </Border>
            </Grid>
        </Border>
    </DataTemplate>
</CarouselView.ItemTemplate>

So maybe u could use this image tap workaround for your case.

[Vroomer]

@npostma I'm using 7.0.0-ci.net7.19653 on Windows right now. .NET 8 is crashing for me altogether. Your code is not a workaround for me.

[npostma]

Not even when you overlay you carousel card with an invisible transparant image that holds the TapGesture? (Like a 1x1 px stretched image). I know, no one wants that, but we need tobe creative for now 🤔 With a grid you can 'stack' cels.

[Vroomer]

@npostma I can't overlay my CollectionView items because they contain buttons and entry fields.

[hartez]

This issue is an agglomeration of about half a dozen different issues, so I'm going to do my best to address them all.

First off - if you've seen issues on iOS where some tap gestures on a page fire and others further down do not, and your items are inside of a ScrollView: you might have been hitting a variation of #14257. It's not a gesture issue, it's a ScrollView issue. It's been addressed in .NET 8, and it's on the consideration list for backporting to .NET 7.

We've also addressed some issues on iOS in .NET 7 and 8 with layouts on iOS not having user interaction enabled; you may have run into these, and now they're fixed. If you had problems with TapGestures on Grids, StackLayouts, ContentViews, Borders, Frames, etc., this may have been your actual issue.

We've fixed some problems with Frame on Android which may have been preventing TapGesture from firing reliably.

We've also addressed some interaction issues with Frames as parts of DataTemplates, so if you've had a problem with DataTemplates containing Frames not honoring your TapGestures, that's likely been fixed.

If you're having problems with gestures on Spans, we're tracking that issue at #4734.

Because this issue has become so large and contains so many sub-issues unrelated to the original problem, we're asking that anyone who is still experiencing problems with TapGesture on controls to open an issue specific to their situation so that we can address them appropriately. We will be closing this issue.

[hartez]

To address the original issue from the original poster:

CheckBox, Switch, and RadioButton intentionally do not have Command properties because that would be contrary to the nature of the controls. They are not intended to initiate action, they are intended to modify state.

While it's possible to force a Command on them by adding a TapGesture, that's not a recommended way to use them. A TapGesture on a control may (depending on the platform) intercept user touches and prevent interaction with the underlying control; it might not toggle the state. Also, other ways of toggling the control (programmatic, or via alternate input methods) may not cause the intended Command to run.

If you need to run some sort of additional logic when a CheckBox/RadioButton is checked/unchecked or a Switch is toggled, you have a couple of options:

1. Subscribe to the CheckedChanged/IsToggled events of those controls
2. Bind those controls to a property in your viewmodel and execute the additional logic when the viewmodel property changes.

All that being said, TapGesture does now fire on the controls in question. But I highly recommend that you do not use TapGesture to force a Command on an inappropriate control.