taublast / AppoMobi.Maui.Gestures

Library for .NET MAUI to handle gestures. To be consumed in Xaml and code-behind.

AppoMobi.Maui.Gestures

Library for .Net MAUI to handle gestures. Can be consumed in Xaml and code-behind. A nuget with the same name is available.

This library is used by DrawnUi for .Net Maui.

Features

• Down
• Up
• Tap
• LongPress
• Pan
• Pinch (windows platform missing)
• Rotate (in progress)

Here and there some properties are still missing, but the main functionality is there.

Some points of interest:

• Customizable touch mode
• Report velocity, distance, time, etc
• All data uses pixels on every platform for better precision

The philosophy is to have the more platform agnostic code as possible, by processing platform raw input in a shared code.

Installation

Install the package AppoMobi.Maui.Gestures from NuGet.

After that initialize the library in the MauiProgram.cs file:

builder.UseGestures();

Usage

Getures are handled by a Maui Effect. It attaches itsself if you add one of its key attachable static properties to a control.

Basic Usage

You can just attach properties that would invoke your commands or handlers upon a specific gesture.

Xaml

<Label Text="Hello World!" 
	    touch:TouchEffect.CommandLongPressing="{Binding Source={x:Reference ThisPage}, Path=BindingContext.CommandGoToAnotherPage}" 
	    touch:TouchEffect.CommandTapped="{Binding Source={x:Reference ThisPage}, Path=BindingContext.CommandGoToAnotherPage}" 
	    touch:TouchEffect.CommandTappedParameter="{Binding .}" />

Code behind

TouchEffect.SetCommandTapped(tabItem, TabItemTappedCommand);
TouchEffect.SetCommandTappedParameter(tabItem, selectedIndex);

Enhanced Usage

You can opt for processing gestures on a lower level yourself, especially if you are creating a custom control. First we just attach the effect with a special property:

    <draw:Canvas
        touch:TouchEffect.ForceAttach="True">

or

 TouchEffect.SetForceAttach(myView, true);

Now you need to implement a buil-it interface IGestureListener in your custom control:

    public interface IGestureListener
    {
        public void OnGestureEvent(TouchActionType type, TouchActionEventArgs args, TouchActionResult action);
        public bool InputTransparent { get; }
    }

As you might guess OnGestureEvent will be invoked on every touch detected if your InputTransparent is not returning True.

Hints

For a case of your custom control sitting inside a ScrollView there is a TouchMode property to be played with. For example you might want to set it to TouchHandlingStyle.Lock so that when your control receives the Down event the parent ScrollView stops receiving gestures until we get an Up, so we can Pan our control at will.

Tweaks

public static TouchEffect.TappedWhenMovedThresholdPoints

How much finger can move between DOWN and UP for the gestured to be still considered as TAPPED. In points, not pixels.

TouchEffect.TappedWhenMovedThresholdPoints = 10f;