.NET MAUI

Topics in this category

Advanced & Enterprise Advanced Data Binding & Collections App Lifecycle & Windows Best Practices & Architecture Concurrency & Threading Controls & Views Data Binding & MVVM Dependency Injection & Services Desktop - WinUI & Mac Catalyst Device Features & Essentials Fonts, Icons & Media Forms, Input & Validation Fundamentals & Architecture Gestures & Animations Graphics & Drawing Local Storage & Data Maps & Location Migration from Xamarin.Forms Native Interop & Libraries Networking & APIs

.NET MAUI

Gestures & Animations

Q: How do you handle tap gestures on any view in MAUI?

Add a TapGestureRecognizer to a view's GestureRecognizers and bind its Command (or handle Tapped). This lets non-button elements like images or labels respond to taps, and NumberOfTapsRequired supports double-tap.

Q: What gesture recognizers does MAUI provide?

MAUI includes TapGestureRecognizer, PanGestureRecognizer (drag), PinchGestureRecognizer (zoom), SwipeGestureRecognizer (directional swipes), and DragGestureRecognizer/DropGestureRecognizer (drag-and-drop). Multiple recognizers can be attached to one view.

Q: How do you implement pinch-to-zoom or pan in MAUI?

Attach a PinchGestureRecognizer and update Scale from e.Scale around the pinch origin, or a PanGestureRecognizer and update TranslationX/Y from e.TotalX/Y. Track the starting transform in the Started status and apply deltas during Running to keep motion smooth.

Q: How do you run basic animations in MAUI?

Use the ViewExtensions async animation methods—FadeTo, TranslateTo, ScaleTo, RotateTo, ColorTo—which return Tasks you can await or combine with Task.WhenAll. Specify duration and an Easing function. Cancel with this.AbortAnimation when needed.

Q: How do you create custom animations with the Animation class?

Use the low-level Animation class to define a callback that receives a 0..1 value and applies it to any property, add child animations at offsets for choreography, then call Commit with duration, easing, repeat, and finished callbacks. This enables animations beyond the built-in extension methods.

Q: How do you keep animations smooth and avoid jank?

Animate transform properties (Translation, Scale, Rotation, Opacity) which are cheap, rather than layout-affecting properties that trigger re-measure. Keep per-frame callbacks lightweight, avoid allocations in loops, and prefer GPU-friendly transforms. Test on low-end devices where jank appears first.

6 question(s)

How do you handle tap gestures on any view in MAUI?

Beginner

Add a TapGestureRecognizer to a view's GestureRecognizers and bind its Command (or handle Tapped). This lets non-button elements like images or labels respond to taps, and NumberOfTapsRequired supports double-tap.

<Image Source="heart.png">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding LikeCommand}" />
    </Image.GestureRecognizers>
</Image>

Real-world example A like button made from an Image responds to taps via a gesture recognizer bound to a command.

Common follow-ups: How do you detect a double tap? | Which views support gestures?

Gestures Commands Gestures & Animations

What gesture recognizers does MAUI provide?

Beginner

MAUI includes TapGestureRecognizer, PanGestureRecognizer (drag), PinchGestureRecognizer (zoom), SwipeGestureRecognizer (directional swipes), and DragGestureRecognizer/DropGestureRecognizer (drag-and-drop). Multiple recognizers can be attached to one view.

<Image.GestureRecognizers>
    <PinchGestureRecognizer PinchUpdated="OnPinch" />
    <PanGestureRecognizer PanUpdated="OnPan" />
</Image.GestureRecognizers>

Real-world example A photo viewer combines pinch-to-zoom and pan-to-move recognizers on the same image.

Common follow-ups: Can views have multiple recognizers? | What does SwipeGestureRecognizer do?

Gestures Controls & Views Gestures & Animations

How do you implement pinch-to-zoom or pan in MAUI?

Intermediate

Attach a PinchGestureRecognizer and update Scale from e.Scale around the pinch origin, or a PanGestureRecognizer and update TranslationX/Y from e.TotalX/Y. Track the starting transform in the Started status and apply deltas during Running to keep motion smooth.

void OnPan(object s, PanUpdatedEventArgs e)
{
    if (e.StatusType == GestureStatus.Running)
    {
        image.TranslationX = _startX + e.TotalX;
        image.TranslationY = _startY + e.TotalY;
    }
}

Real-world example An image editor lets users pan a zoomed photo by tracking pan deltas from the gesture start point.

Common follow-ups: Why track the start transform? | How do you zoom around the pinch point?

Gestures Graphics & Drawing Gestures & Animations

How do you run basic animations in MAUI?

Intermediate

Use the ViewExtensions async animation methods—FadeTo, TranslateTo, ScaleTo, RotateTo, ColorTo—which return Tasks you can await or combine with Task.WhenAll. Specify duration and an Easing function. Cancel with this.AbortAnimation when needed.

await Task.WhenAll(
    logo.FadeTo(1, 500),
    logo.ScaleTo(1.2, 500, Easing.CubicOut));

Real-world example A splash logo fades in while scaling up slightly, using two awaited animations run together.

Common follow-ups: How do you run animations in parallel? | What is Easing?

Animations Async Gestures & Animations

How do you create custom animations with the Animation class?

Advanced

Use the low-level Animation class to define a callback that receives a 0..1 value and applies it to any property, add child animations at offsets for choreography, then call Commit with duration, easing, repeat, and finished callbacks. This enables animations beyond the built-in extension methods.

var anim = new Animation(v => box.Rotation = v, 0, 360);
anim.Commit(box, "spin", length: 1000,
    easing: Easing.Linear, repeat: () => true);

Real-world example A loading indicator spins continuously via a custom Animation committed with repeat, without a third-party control.

Common follow-ups: How do you choreograph child animations? | How do you make it repeat?

Animations Performance & Optimization Gestures & Animations

How do you keep animations smooth and avoid jank?

Advanced

Animate transform properties (Translation, Scale, Rotation, Opacity) which are cheap, rather than layout-affecting properties that trigger re-measure. Keep per-frame callbacks lightweight, avoid allocations in loops, and prefer GPU-friendly transforms. Test on low-end devices where jank appears first.

// Cheap: transform-only
await card.TranslateTo(0, -20, 150, Easing.SinOut);
// Costly: animating HeightRequest forces layout each frame

Real-world example Replacing a height animation with a translate transform removes stutter on budget Android phones.

Common follow-ups: Why avoid animating layout properties? | Which properties are GPU-friendly?

Animations Performance & Optimization Gestures & Animations