Implementing TouchTracking in .NET MAUI

Question

I have been working on migrating our app from Xamarin.Forms to .NET MAUI. Our app has few drawing feature which user can use their fingers to make a draw. We used TouchTracking nuget package in Xamarin.Forms, but its not compatible with .NET MAUI.

Here's are some APIs that available in TouchTracking package which we use it very much:

DrawPage.xaml

<Grid BackgroundColor="White">
   <skia:SKCanvasView x:Name="canvasView" PaintSurface="PaintingCanvasEnvent" />

   <Grid.Effects>
      <tt1:TouchEffect Capture="True" TouchAction="OnTouchEffectAction"/>
   </Grid.Effects>
</Grid>

DrawPage.cs

void OnTouchEffectAction(object sender, TouchActionEventArgs args)
{
    SKPoint current = args.Location;
    
    switch (args.Type)
    {
        case TouchActionType.Pressed:
            //codes here ...
            break;

        case TouchActionType.Moved:
            //codes here
            break;

        case TouchActionType.Released:
            //codes here
            break;

        case TouchActionType.Cancelled:
            //codes here
            break;
    }
}

In Xamarin.Forms, the TouchTracking package allow us to detect the touch event and we can get all the touch IDs (because TouchTracking can detect multiple fingers) with its coordinates.

So how do I implement TouchTracking nuget package or some sort of codes that can achieve the above requirement?

Answer 1

All of the elements that you need are probably in there, most of the code that you might need will only need namespace changes from XF to MAUI

So basically TouchEvent from here: https://github.com/OndrejKunc/SkiaScene/tree/master/source/TouchTracking/TouchTracking

namespace TouchTracking.Forms
{
    public class TouchEffect : RoutingEffect
    {
        public event TouchActionEventHandler TouchAction;

        public TouchEffect() : base("TouchTracking.TouchEffect")
        {
        }

        public bool Capture { set; get; }

        public void OnTouchAction(object element, TouchActionEventArgs args)
        {
            TouchAction?.Invoke(element, args);
        }
    }
}

And then in your native platform:

[assembly: ResolutionGroupName("TouchTracking")]
[assembly: ExportEffect(typeof(TouchTracking.Forms.Droid.TouchEffect), "TouchEffect")]
namespace TouchTracking.Forms.Droid
{
    public class TouchEffect : PlatformEffect
    {
        private TouchHandler _touchHandler;
        private Android.Views.View _view;
        private TouchTracking.Forms.TouchEffect _touchEffect;

        protected override void OnAttached()
        {
            _view = Control == null ? Container : Control;

            // Get access to the TouchEffect class in the PCL
            _touchEffect =
                (TouchTracking.Forms.TouchEffect)Element.Effects.FirstOrDefault(e => e is TouchTracking.Forms.TouchEffect);

            if (_touchEffect == null)
            {
                return;
            }

            _touchHandler = new TouchHandler();
            _touchHandler.TouchAction += TouchHandlerOnTouch;
            _touchHandler.Capture = _touchEffect.Capture;
            _touchHandler.RegisterEvents(_view);

        }

        private void TouchHandlerOnTouch(object sender, TouchActionEventArgs args)
        {
            _touchEffect.OnTouchAction(sender, args);
        }

        protected override void OnDetached()
        {
            if (_touchHandler == null)
            {
                return;
            }
            _touchHandler.TouchAction -= TouchHandlerOnTouch;
            _touchHandler.UnregisterEvents(_view);
        }
    }
}

The whole source code is here : https://github.com/OndrejKunc/SkiaScene/tree/master/source/TouchTracking

Update

Since I have so much usage of TouchTracking I just decided to port it to Maui myself, Checkout : https://github.com/FreakyAli/Maui.FreakyEffects