All skills
davidortinau avatar

/maui-gestures

@542317e
by David Ortinaudavidortinau/maui-skills173 stars
20

Guidance for implementing tap, swipe, pan, pinch, drag-and-drop, and pointer gesture recognizers in .NET MAUI applications. Covers XAML and C# usage, combining gestures, and platform differences. USE FOR: "tap gesture", "swipe gesture", "pan gesture", "pinch gesture", "drag and drop", "pointer gesture", "gesture recognizer", "TapGestureRecognizer", "SwipeGestureRecognizer", "PanGestureRecognizer", "combine gestures". DO NOT USE FOR: animations triggered by gestures (use maui-animations), CollectionView swipe actions (use maui-collectionview), or custom drawing interaction (use maui-graphics-drawing).

Use this Skill: https://skilld.dev/gh/davidortinau/maui-skills/maui-gestures

This session only. Nothing lands on disk.

SKILL.md

β‰ˆ156 tokens always: the name and description. β‰ˆ1k when used: this file. β‰ˆ2k more on demand in 1 file.

.NET MAUI Gesture Recognizers

Deprecated API Warning

⚠️ In .NET 10, ClickGestureRecognizer is deprecated. Use TapGestureRecognizer (touch/stylus) and PointerGestureRecognizer (mouse hover/press) instead.


Common Mistakes

One SwipeGestureRecognizer per direction

A single recognizer handles only one direction. Adding multiple directions to one recognizer silently fails on most platforms.

<!-- ❌ Only fires for Left β€” Right is ignored -->
<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped" />

<!-- βœ… Separate recognizer per direction -->
<SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped" />
<SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped" />

AllowDrop defaults to false

Drop targets silently ignore drops if you forget this property.

<!-- ❌ Drop never fires β€” AllowDrop defaults to false -->
<StackLayout>
  <StackLayout.GestureRecognizers>
    <DropGestureRecognizer Drop="OnDrop" />
  </StackLayout.GestureRecognizers>
</StackLayout>

<!-- βœ… Explicitly enable drops -->
<StackLayout>
  <StackLayout.GestureRecognizers>
    <DropGestureRecognizer AllowDrop="True" Drop="OnDrop" />
  </StackLayout.GestureRecognizers>
</StackLayout>

Using TapGestureRecognizer for hover effects

Tap recognizers don't track pointer movement. Use PointerGestureRecognizer for hover effects β€” it also enables the PointerOver visual state.

<!-- ❌ No hover tracking β€” user must tap to trigger -->
<Border>
  <Border.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding HoverCommand}" />
  </Border.GestureRecognizers>
</Border>

<!-- βœ… Proper hover detection + visual state -->
<Border>
  <Border.GestureRecognizers>
    <PointerGestureRecognizer PointerEnteredCommand="{Binding HoverInCommand}"
                              PointerExitedCommand="{Binding HoverOutCommand}" />
  </Border.GestureRecognizers>
</Border>

Platform Differences That Bite

Pan delta coordinates differ by platform

Platform TotalX / TotalY relative to
iOS / Mac Catalyst Start of gesture
Android Previous event (not start!)
Windows Start of gesture

If sub-pixel accuracy matters, normalize Android deltas by accumulating them manually rather than using TotalX/TotalY directly.

Pointer hover is mouse/trackpad only

On touch devices, PointerGestureRecognizer events fire on press/release but hover is not tracked between touches. Don't rely on PointerMoved for touch-based UI.

Cross-app drag-and-drop

Platform Supported
iPadOS / Mac Catalyst βœ… Yes
Windows βœ… Yes
Android ❌ No

Secondary button (right-click)

Platform Behaviour
iOS / Mac Catalyst Buttons = ButtonsMask.Secondary works
Windows Buttons = ButtonsMask.Secondary works
Android Falls back to long-press β€” no true right-click

Gesture Combination Conflicts

Combining pan + swipe on the same view conflicts on Android β€” the swipe may consume the gesture before pan starts. Test on all platforms, or use only one at a time.

Combining tap + pan works well β€” tap fires on quick taps, pan fires on sustained drags.


MVVM Best Practice

Prefer commands over events for testable view models. Both work identically at runtime, but commands are easier to mock and test.

<!-- βœ… Bindable command β€” testable -->
<TapGestureRecognizer Command="{Binding TapCommand}" />

<!-- ⚠️ Event handler β€” requires code-behind, harder to unit-test -->
<TapGestureRecognizer Tapped="OnTapped" />

Quick Rules

  1. One SwipeGestureRecognizer per direction
  2. PointerGestureRecognizer for hover, not TapGestureRecognizer
  3. AllowDrop="True" on drop targets β€” it defaults to false
  4. Normalize pan deltas on Android (relative to previous event, not start)
  5. Prefer commands over events for MVVM
  6. Use TapGestureRecognizer instead of deprecated ClickGestureRecognizer (.NET 10)
  7. Don't rely on PointerMoved for touch-based UI β€” hover doesn't track

Source: SKILL.md on GitHub

No alerts16d4 checks Β· Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides documentation and code examples for implementing gesture recognizers in .NET MAUI applications. It follows best practices and contains no malicious code or suspicious patterns.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW Β· No issues

  • Runlayer6mo

    1 file scanned Β· No issues

Signed by skilld at 542317e. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 6 months ago

README badge

README badge for davidortinau/maui-skills/maui-gestures