GestureRecognizer requires a lot of drag to start triggering

[Suundumused]

I'm creating an analog stick using Pan Gesture Recognizer, basically it's a rectangle with an ellipse inside, where when the user drags with their finger, the ellipse moves in that direction.

• The problem is that for the GestureRecognizer wake up, it's necessary to drag it a lot and when it starts the initial value is 10, if you want smaller values ​​you need to drag this to near 0 manually after waking up the recognizer...

• In short, this simply ignores reasonably small starting values ​​for it to start detecting.

Video.sem.titulo.Feito.com.o.Clipchamp.5.mp4

My ContentView XAML:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProject.Source.......">
    <Grid x:Name="MainTable">
        <Rectangle x:Name="Area"
         AnchorX="0.5"
         AnchorY="0.5"
         RadiusX="33"
         RadiusY="33"
         Fill="Crimson"
         Stroke="Beige"
         StrokeThickness="3">
            <Rectangle.GestureRecognizers>
                <PanGestureRecognizer PanUpdated="OnPanUpdated"/>
            </Rectangle.GestureRecognizers>
        </Rectangle>

        <Ellipse
            x:Name="AnalogImage"
            AnchorX="0.5"
            AnchorY="0.5"
            Fill="DarkSlateGray"
            Stroke="Beige"
            StrokeThickness="3"
            HorizontalOptions="Start"
            VerticalOptions="Center">
        </Ellipse>
    </Grid>
</ContentView>

XAML.cs:

private async void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    switch (e.StatusType)
    {
        case GestureStatus.Running:
            last_gesture_value = e.TotalX;

            Console.WriteLine($"Thumbstick value: {last_gesture_value}");
            break;
    }
}

[rokmeglic71]

@Suundumused if you are using iOS, you need to calculate StartingX + e.TotalX. Look at this post, it will guide you further.

[Suundumused]

Interesting, but I'm using Android for the project, only. Meanwhile I added an offset of -5 to the initial input to suppress this dead zone.

[stephenquan]

Instead of the GestureRecognizer, I use <Slider Opacity="0" Rotation="90"/> which, amazingly, produces a nice cross-platform solution:

<Grid
    x:Name="MainTable"
    HeightRequest="640"
    WidthRequest="480">

    <Rectangle
        x:Name="Area"
        Fill="Crimson"
        RadiusX="33"
        RadiusY="33"
        Stroke="Beige"
        StrokeThickness="3" />

    <Ellipse
        x:Name="AnalogImage"
        Fill="DarkSlateGray"
        HeightRequest="200"
        HorizontalOptions="Center"
        Stroke="Beige"
        StrokeThickness="3"
        TranslationY="{Binding Value, x:DataType=Slider, Source={Reference slider}}"
        VerticalOptions="Start"
        WidthRequest="200" />

    <Slider
        x:Name="slider"
        HeightRequest="480"
        Maximum="440"
        Minimum="0"
        Opacity="0"
        Rotation="90"
        WidthRequest="640" />
</Grid>