Erkennen einer Wischbewegung

Das Erkennungsmodul für Wischbewegungen von .NET Multi-Platform App UI (.NET MAUI) erkennt, wenn ein Finger in horizontaler oder vertikaler Richtung über den Bildschirm bewegt wird. Es wird oft verwendet, um die Navigation durch den Inhalt zu starten.

In .NET MAUI sorgt die SwipeGestureRecognizer-Klasse für die Erkennung der Ziehbewegung. Diese Klasse definiert die folgenden Eigenschaften:

• Command vom Typ ICommand, der ausgeführt wird, sobald eine Wischbewegung erkannt wird.
• CommandParameter, vom Typ object: Parameter, der an den Command übergeben wird.
• Direction vom Typ SwipeDirection, der die Richtung definiert
• Threshold vom Typ uint, der den Mindestwischabstand in geräteunabhängigen Einheiten darstellt, der erreicht werden muss, damit eine Wischbewegung erkannt wird.. Der Standardwert dieser Eigenschaft ist 100, was bedeutet, dass alle Wischbewegungen, die weniger als 100 geräteunabhängige Einheiten betragen, ignoriert werden.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

SwipeGestureRecognizer definiert auch ein Swiped-Ereignis, das ausgelöst wird, wenn ein Wischen erkannt wird. Das SwipedEventArgs-Objekt, das das Swiped-Ereignis begleitet, definiert folgende Eigenschaften:

• Direction vom Typ SwipeDirection, gibt die Richtung der Wischbewegung an.
• Parameter vom Typ object, gibt den Wert an, der von der CommandParameter-Eigenschaft übergeben wird, falls definiert.

Erstellen eines SwipeGestureRecognizers

Damit eine View eine Wischbewegung erkennt, erstellen Sie ein SwipeGestureRecognizer-Objekt, setzen Sie die Direction-Eigenschaft auf einen SwipeDirection-Enumerationswert (Left, Right, Up oder Down), setzen Sie optional die Threshold-Eigenschaft, behandeln Sie das Swiped-Ereignis und fügen Sie den neuen Gestenerkennungsmodul zur GestureRecognizers-Auflistung der Ansicht hinzu. Das folgende Codebeispiel zeigt ein SwipeGestureRecognizer-Modul, das an eine BoxView-Klasse angefügt ist:

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

Der entsprechende C#-Code lautet:

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);

Erkennen der Wischrichtung

Die SwipeGestureRecognizer.Direction-Eigenschaft kann auf einen einzelnen Wert aus der SwipeDirection-Enumeration oder auf mehrere Werte festgelegt werden. Dadurch kann das Swiped-Ereignis als Reaktion auf eine Wischbewegung in mehr als eine Richtung ausgelöst werden. Dies wird jedoch dadurch eingeschränkt, dass eine einzelne SwipeGestureRecognizer-Klasse nur Wischbewegungen erkennen kann, die auf derselben Achse vorkommen. Deshalb können Wischbewegungen auf der horizontalen Achse erkannt werden, indem die Direction-Eigenschaft auf Left und Right festgelegt wird:

<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped"/>

Auf ähnliche Weise können Wischbewegungen auf der vertikalen Achse erkannt werden, indem die Direction-Eigenschaft auf Up und Down festgelegt wird:

SwipeGestureRecognizer swipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };

Alternativ kann eine SwipeGestureRecognizer-Klasse für jede Wischrichtung erstellt werden, damit Wischbewegungen in alle Richtungen erkannt werden können:

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Up" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Down" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

Der entsprechende C#-Code lautet:

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  downSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
downSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);
boxView.GestureRecognizers.Add(rightSwipeGesture);
boxView.GestureRecognizers.Add(upSwipeGesture);
boxView.GestureRecognizers.Add(downSwipeGesture);

Antworten auf eine Wischbewegung

Eine erkannte Wischbewegung kann von einem Handler für das Swiped-Ereignis beantwortet werden:

void OnSwiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction)
    {
        case SwipeDirection.Left:
            // Handle the swipe
            break;
        case SwipeDirection.Right:
            // Handle the swipe
            break;
        case SwipeDirection.Up:
            // Handle the swipe
            break;
        case SwipeDirection.Down:
            // Handle the swipe
            break;
    }
}

Die SwipedEventArgs-Klasse kann untersucht werden, um die Richtung der Wischbewegung zu bestimmen, wobei benutzerdefinierte Logik nach Bedarf auf die Wischbewegung reagiert. Die Richtung der Wischbewegung kann aus der Direction-Eigenschaft der Ereignisargumente abgerufen werden, die auf einen der Werte aus der SwipeDirection-Enumeration festgelegt wird. Darüber hinaus verfügen die Ereignisargumente auch über eine Parameter-Eigenschaft, die auf den Wert der CommandParameter-Eigenschaft festgelegt wird, sofern definiert.

Erstellen eines Wischcontainers

Die Klasse SwipeContainer, die im folgenden Beispiel gezeigt wird, ist eine verallgemeinerte Wischerkennungsklasse, die eine View umschließt, um einer Wischgestenerkennung durchzuführen:

public class SwipeContainer : ContentView
{
    public event EventHandler<SwipedEventArgs> Swipe;

    public SwipeContainer()
    {
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Left));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Right));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Up));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Down));
    }

    SwipeGestureRecognizer GetSwipeGestureRecognizer(SwipeDirection direction)
    {
        SwipeGestureRecognizer swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

Die SwipeContainer-Klasse erstellt SwipeGestureRecognizer-Objekte für alle vier Wischrichtungen und fügt Swipe-Ereignishandler an. Diese Ereignishandler rufen das Swipe-Ereignis auf, das durch den SwipeContainer definiert wird.

Das folgende XAML-Codebeispiel zeigt die Klasse SwipeContainer, die ein BoxView-Element umschließt:

<StackLayout>
    <local:SwipeContainer Swipe="OnSwiped" ...>
        <BoxView Color="Teal" ... />
    </local:SwipeContainer>
</StackLayout>

In diesem Beispiel wird, wenn BoxView eine Wischbewegung empfängt, das Ereignis Swiped in SwipeGestureRecognizer ausgelöst. Dies erfolgt durch die SwipeContainer-Klasse, die ihr eigenes Swipe-Ereignis auslöst. Dieses Swipe-Ereignis wird auf der Seite behandelt. Die SwipedEventArgs-Klasse kann dann untersucht werden, um die Richtung der Wischbewegung zu bestimmen, wobei benutzerdefinierte Logik nach Bedarf auf die Wischbewegung reagiert.

Der entsprechende C#-Code lautet:

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeContainer swipeContainer = new SwipeContainer { Content = boxView, ... };
swipeContainer.Swipe += (sender, e) =>
{
  // Handle the swipe
};

StackLayout stackLayout = new StackLayout();
stackLayout.Add(swipeContainer);