I’m working on a custom view on .net MAUI. In this custom view, I would like to load an image and be able to move it around the screen using pan gesture recognizer. I was following this tutorial. As first step, I’m just using a Border to test the behaviour.

This is my custom control:

SignatureView.xaml.cs

public partial class SignatureView : ContentView
{
  private double panX;

  private double panY;

  public SignatureView()
  {
    InitializeComponent();
  }

  private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e)
  {
    switch (e.StatusType)
    {
        case GestureStatus.Running:
            double boundsX = Signature.Width;
            double boundsY = Signature.Height;
            Signature.TranslationX = Math.Clamp(panX + e.TotalX, -boundsX, boundsX);
            Signature.TranslationY = Math.Clamp(panY + e.TotalY, -boundsY, boundsY);
            break;

        case GestureStatus.Completed:
            panX = Signature.TranslationX;
            panY = Signature.TranslationY;
            break;
    }
  }
}

SignatureView.xaml

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Controls.SignatureView">

    <AbsoluteLayout BackgroundColor="White">
        <Border x:Name="Signature" StrokeShape="RoundRectangle 50" BackgroundColor="Blue" HeightRequest="50" WidthRequest="50">
            <Border.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated"/>
            </Border.GestureRecognizers>
        </Border>
    </AbsoluteLayout>
<ContentView/>

This is how I’m using this control:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MyApp.Controls"
             x:Class="MyApp.Views.MyPage">

    <ContentPage.Content>
        <controls:SignatureView/>
   </ContentPage.Content>
</ContentPage>

This is the behaviour I’m seeing:

1. The view only can move on a small portion of the screen
2. The view is jumping around while is being moved

Am I doing something wrong? How could I smoothly move the view around?