|
1 | 1 | --- |
2 | 2 | title: "Recognize a tap gesture" |
3 | 3 | description: "This article explains how to recognize a tap gesture in a .NET MAUI app." |
4 | | -ms.date: 10/03/2022 |
| 4 | +ms.date: 08/18/2025 |
5 | 5 | --- |
6 | 6 |
|
7 | 7 | # Recognize a tap gesture |
8 | 8 |
|
9 | | -A .NET Multi-platform App UI (.NET MAUI) tap gesture recognizer is used for tap detection and is implemented with the <xref:Microsoft.Maui.Controls.TapGestureRecognizer> class. This class defines the following properties: |
| 9 | +A .NET Multi-platform App UI (.NET MAUI) tap gesture recognizer is used for tap detection and is implemented with the <xref:Microsoft.Maui.Controls.TapGestureRecognizer> class. |
| 10 | + |
| 11 | +::: moniker range=">=net-maui-10.0" |
| 12 | +> [!IMPORTANT] |
| 13 | +> In .NET 10, <xref:Microsoft.Maui.Controls.ClickGestureRecognizer> is deprecated. Use <xref:Microsoft.Maui.Controls.TapGestureRecognizer> for tap/click interactions, and <xref:Microsoft.Maui.Controls.PointerGestureRecognizer> for pointer hover/move/press scenarios. The <xref:Microsoft.Maui.Controls.TapGestureRecognizer> supports primary and secondary buttons via the <xref:Microsoft.Maui.Controls.TapGestureRecognizer.Buttons> property and can be used to handle single and double tap gestures. |
| 14 | +::: moniker-end |
| 15 | + |
| 16 | +This class defines the following properties: |
10 | 17 |
|
11 | 18 | - <xref:Microsoft.Maui.Controls.TapGestureRecognizer.Buttons>, of type <xref:Microsoft.Maui.Controls.ButtonsMask>, which defines whether the primary or secondary mouse button, or both, triggers the gesture on Android, Mac Catalyst, and Windows. For more information, see [Define the button masks](#define-the-button-mask). |
12 | 19 | - <xref:Microsoft.Maui.Controls.TapGestureRecognizer.Command>, of type <xref:System.Windows.Input.ICommand>, which is executed when a tap is recognized. |
@@ -56,6 +63,53 @@ image.GestureRecognizers.Add(tapGestureRecognizer); |
56 | 63 |
|
57 | 64 | By default the <xref:Microsoft.Maui.Controls.Image> will respond to single taps. When the <xref:Microsoft.Maui.Controls.TapGestureRecognizer.NumberOfTapsRequired> property is set to greater than one, the event handler will only be executed if the taps occur within a set period of time. If the second (or subsequent) taps don't occur within that period, they're effectively ignored. |
58 | 65 |
|
| 66 | +::: moniker range=">=net-maui-10.0" |
| 67 | + |
| 68 | +## Migrate from ClickGestureRecognizer (>= .NET 10) |
| 69 | + |
| 70 | +In previous versions, mouse click interactions could be handled with <xref:Microsoft.Maui.Controls.ClickGestureRecognizer>. In .NET 10, this recognizer is deprecated. Migrate to <xref:Microsoft.Maui.Controls.TapGestureRecognizer> for click/tap interactions, and use <xref:Microsoft.Maui.Controls.PointerGestureRecognizer> for pointer enter/exit/move/press/release scenarios. |
| 71 | + |
| 72 | +The following example shows how to migrate from `ClickGestureRecognizer` to `TapGestureRecognizer` while maintaining support for primary/secondary buttons: |
| 73 | + |
| 74 | +```xaml |
| 75 | +<!-- Before (.NET 9 and earlier) --> |
| 76 | +<Image Source="dotnet_bot.png"> |
| 77 | + <Image.GestureRecognizers> |
| 78 | + <ClickGestureRecognizer Clicked="OnClicked" |
| 79 | + NumberOfClicksRequired="1" |
| 80 | + Buttons="Primary,Secondary" /> |
| 81 | + </Image.GestureRecognizers> |
| 82 | +</Image> |
| 83 | + |
| 84 | +<!-- After (.NET 10) --> |
| 85 | +<Image Source="dotnet_bot.png"> |
| 86 | + <Image.GestureRecognizers> |
| 87 | + <TapGestureRecognizer Tapped="OnTapped" |
| 88 | + NumberOfTapsRequired="1" |
| 89 | + Buttons="Primary,Secondary" /> |
| 90 | + </Image.GestureRecognizers> |
| 91 | +</Image> |
| 92 | +``` |
| 93 | + |
| 94 | +In code-behind, handle the <xref:Microsoft.Maui.Controls.TapGestureRecognizer.Tapped> event and inspect <xref:Microsoft.Maui.Controls.TappedEventArgs.Buttons> to distinguish the mouse button: |
| 95 | + |
| 96 | +```csharp |
| 97 | +void OnTapped(object sender, TappedEventArgs e) |
| 98 | +{ |
| 99 | + if (e.Buttons == ButtonsMask.Secondary) |
| 100 | + { |
| 101 | + // Handle secondary/right click |
| 102 | + } |
| 103 | + else |
| 104 | + { |
| 105 | + // Handle primary/left click |
| 106 | + } |
| 107 | +} |
| 108 | +``` |
| 109 | + |
| 110 | +If you need pointer hover or press/release details (without a completed tap), use <xref:Microsoft.Maui.Controls.PointerGestureRecognizer> and its events such as `PointerEntered`, `PointerMoved`, `PointerPressed`, and `PointerReleased`. For more information, see [Recognize a pointer gesture](pointer.md). |
| 111 | +::: moniker-end |
| 112 | + |
59 | 113 | ## Define the button mask |
60 | 114 |
|
61 | 115 | A <xref:Microsoft.Maui.Controls.TapGestureRecognizer> object has a <xref:Microsoft.Maui.Controls.TapGestureRecognizer.Buttons> property, of type <xref:Microsoft.Maui.Controls.ButtonsMask>, that defines whether the primary or secondary mouse button, or both, triggers the gesture on Android, Mac Catalyst, and Windows. The <xref:Microsoft.Maui.Controls.ButtonsMask> enumeration defines the following members: |
|
0 commit comments