.Net Maui Gesture Recognizers Tap Pinch Pan Swipe Complete Guide

Example 1: TapGestureRecognizer

Step 1: Create a new .NET MAUI project

1. Open Visual Studio.
2. Create a new .NET MAUI App project.

Step 2: Add a TapGestureRecognizer to a Button

• Open MainPage.xaml and add a Button that will respond to taps.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.MainPage">

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Button Text="Tap Me!"
                x:Name="TapButton"
                HorizontalOptions="Center"
                VerticalOptions="Center">
            <Button.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnButtonTapped" />
            </Button.GestureRecognizers>
        </Button>
    </StackLayout>
</ContentPage>

• Open MainPage.xaml.cs and add the event handler for the tap.

using Microsoft.Maui.Controls;

namespace MauiAppExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonTapped(object sender, EventArgs e)
        {
            TapButton.Text = "Tapped!";
        }
    }
}

Example 2: PinchGestureRecognizer

Step 1: Create a new .NET MAUI project or use the existing one

Step 2: Add a PinchGestureRecognizer to an Image

• Open MainPage.xaml and add an Image that can be pinched to zoom in and out.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.MainPage">

    <Image x:Name="PinchImage"
           Source="image.png"
           HorizontalOptions="Center"
           VerticalOptions="Center">
        <Image.GestureRecognizers>
            <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
        </Image.GestureRecognizers>
    </Image>
</ContentPage>

• Open MainPage.xaml.cs and add the event handler for the pinch gesture. You can also handle the pinch gesture to scale the image.

using Microsoft.Maui.Controls;

namespace MauiAppExample
{
    public partial class MainPage : ContentPage
    {
        double currentScale = 1;
        double startScale = 1;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
        {
            if (e.Status == GestureStatus.Started)
            {
                startScale = PinchImage.Scale;
            }
            else if (e.Status == GestureStatus.Running)
            {
                currentScale += (e.Scale - 1) * startScale;
                currentScale = Math.Max(1, currentScale);
                PinchImage.Scale = currentScale;
            }
        }
    }
}

Example 3: PanGestureRecognizer

Step 1: Create a new .NET MAUI project or use the existing one

Step 2: Add a PanGestureRecognizer to a BoxView

• Open MainPage.xaml and add a BoxView that can be panned around.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppExample.MainPage">

    <AbsoluteLayout>
        <BoxView x:Name="PanningBox"
                 Color="LightBlue"
                 WidthRequest="100"
                 HeightRequest="100"
                 TranslationX="50"
                 TranslationY="50"
                 AbsoluteLayout.LayoutBounds="0,0,1,1"
                 AbsoluteLayout.LayoutFlags="All"
                 InputTransparent="False">
            <BoxView.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="OnPanUpdated" />
            </BoxView.GestureRecognizers>
        </BoxView>
    </AbsoluteLayout>
</ContentPage>

• Open MainPage.xaml.cs and add the event handler for the pan gesture. The code will pan the BoxView around based on the user's finger movements.

using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace MauiAppExample
{
    public partial class MainPage : ContentPage
    {
        double x, y;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            switch (e.StatusType)
            {
                case GestureStatus.Started:
                    x = PanningBox.TranslationX;
                    y = PanningBox.TranslationY;
                    break;

                case GestureStatus.Running:
                    PanningBox.TranslationX = x + e.TotalX;
                    PanningBox.TranslationY = y + e.TotalY;
                    break;
            }
        }
    }
}

Example 4: SwipeGestureRecognizer

Step 1: Create a new .NET MAUI project or use the existing one

Step 2: Add a SwipeGestureRecognizer to a Label

• Open MainPage.xaml and add a Label that can be swiped to change its text.