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

• Attachable .Net Maui effect
• Multi-touch
• Customizable touch mode for cooperation with other views
• Report velocity, distance, time, etc
• All data uses pixels on every platform for better precision

Gestures

• Down/Up
• Tapping
• Longpressing
• Panning
• Rotation
• Zoom
• Mouse wheel on Windows

The philosophy is to have the more platform agnostic code as possible, by processing platform raw input in a shared code. The library is still in development, i am adding more features when i need them myself, so if you feel that something is missing please feel free to leave a message in Discussions or create a PR.

Installation

Install the package AppoMobi.Maui.Gestures from NuGet.

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

builder.UseGestures();

Basic Usage

Getures are handled by a Maui Effect. 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.

The library passes 2 kinds of gesture type, the "raw" TouchActionType and the resulting logical TouchActionResult that you most probably would use.

To note: Since we detect multi-touch you could receive several Down/Up events, the first one would be recognizable with NumberOfTouches being at 1.

You will receive all gesture-related data inside TouchActionEventArgs args.

When you get a TouchActionResult.Panning you could also have the property ManipulationInfo Manipulation filled with scale and rotation data. Otherwise expect it to be null.

The static property TouchEffect.Density is used internally to convert pixels/points, you can you it too as all the data you would get will be in pixels, convert it to points/whatever as you please.

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.

• You can close the keyboard programmatically on Android with a

TouchEffect.CloseKeyboard();

Tweaks

Actually we have some static properties for settings.

• 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;

• How much milliseconds to wait until LongPressing is triggered.

TouchEffect.LongPressTimeMsDefault = 1500;