Search code examples
mauigesture-recognitionswipe-gesture

Swipe Gesture directions Up and Down don't work in .NET MAUI


I get a really strange behavior with the swipe gesture in .NET MAUI. Directions Up and Down seem not to work, while directions Right and Left are working just fine. Has anybody an idea what I'm doing wrong?

Here a simple example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SwipeTester.MainPage">

        <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center">
            <Label x:Name="SwipedCounter" FontSize="18" HorizontalOptions="Center"
                   BackgroundColor="Yellow" HeightRequest="100" WidthRequest="100"
                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

            <Label HeightRequest="200"
                   WidthRequest="100"
                   BackgroundColor="Red">
                <Label.GestureRecognizers>
                    <SwipeGestureRecognizer
                        Direction="Down"
                        Swiped="SwipeGestureRecognizer_OnSwiped"
                        Threshold="20"/>
                    <SwipeGestureRecognizer
                        Direction="Up"
                        Swiped="SwipeGestureRecognizer_OnSwiped"
                        Threshold="20"/>
                    <SwipeGestureRecognizer
                        Direction="Left"
                        Swiped="SwipeGestureRecognizer_OnSwiped"
                        Threshold="20"/>
                    <SwipeGestureRecognizer
                        Direction="Right"
                        Swiped="SwipeGestureRecognizer_OnSwiped"
                        Threshold="20"/>
                </Label.GestureRecognizers>
            </Label>
        </VerticalStackLayout>
</ContentPage>
public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    private void SwipeGestureRecognizer_OnSwiped(object sender, SwipedEventArgs e)
    {
        count++;

        SwipedCounter.Text = count.ToString();
    }
}

Solution

  • The SwipeGestureRecognizer.Direction property can be set to a single value from the SwipeDirection enumeration, or multiple values.

    Swipes that occur on the horizontal axis can be recognized by setting the Direction property to Left and Right. Similarly, swipes that occur on the vertical axis can be recognized by setting the Direction property to Up and Down.

    You can refer to the sample code below:

    <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center"> 
    
        <Label x:Name="SwipedCounter" FontSize="18" HorizontalOptions="Center"
               BackgroundColor="Yellow" HeightRequest="100" WidthRequest="100"
               HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
    
        <Label HeightRequest="200"
               WidthRequest="200"          
               BackgroundColor="Red">
    
            <Label.GestureRecognizers>
    
                <SwipeGestureRecognizer
                    Direction="Down"
                    Swiped="OnSwiped"
                    Threshold="50" 
                    />
    
                <SwipeGestureRecognizer
                    Direction="Up"
                    Swiped="OnSwiped"
                    Threshold="50"
                    />
    
                <SwipeGestureRecognizer
                    Direction="Left"
                    Swiped="OnSwiped"
                    Threshold="50"
                    />
    
                <SwipeGestureRecognizer
                    Direction="Right"
                    Swiped="OnSwiped"
                    Threshold="50"
                    />
    
            </Label.GestureRecognizers>
    
        </Label>
    
    </VerticalStackLayout>
    
    void OnSwiped(object sender, SwipedEventArgs e) 
    {
        switch (e.Direction)
        {
            case SwipeDirection.Left:
                SwipedCounter.Text = "left";
                break;
    
            case SwipeDirection.Right:
                SwipedCounter.Text = "right";
                break;
    
            case SwipeDirection.Up:
                SwipedCounter.Text = "up";
                break;
    
            case SwipeDirection.Down:
                SwipedCounter.Text = "down";
                break;
        }
    }