Teilen über

Hinzufügen einer Wischgestenerkennung

  • Artikel

Eine Streifbewegung tritt auf, wenn ein Finger über den Bildschirm in horizontaler oder vertikaler Richtung bewegt wird und häufig verwendet wird, um die Navigation durch Inhalte zu initiieren.

Damit eine View-Klasse eine Wischbewegung erkennt, erstellen Sie eine SwipeGestureRecognizer-Instanz, legen die Direction-Eigenschaft auf einen SwipeDirection-Enumerationswert (Left, Right, Up oder Down) fest, legen optional die Threshold-Eigenschaft fest, bearbeiten das Swiped-Ereignis und fügen die neue Gestenerkennung für Wischbewegungen zur GestureRecognizers-Collection auf der Ansicht hinzu. Das folgende Codebeispiel zeigt eine SwipeGestureRecognizer-Klasse, die an eine BoxView-Klasse angefügt ist:

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

Hier der entsprechende C#-Code:

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

boxView.GestureRecognizers.Add(leftSwipeGesture);

Die SwipeGestureRecognizer-Klasse enthält auch eine Threshold-Eigenschaft, die optional auf einen uint-Wert festgelegt werden kann, der in geräteunabhängigen Einheiten die minimale Strecke angibt, die gewischt werden muss, damit eine Bewegung erkannt wird. Der Standardwert dieser Eigenschaft beträgt 100 und bedeutet, dass alle Wischbewegungen mit einer Länge von unter 100 geräteunabhängigen Einheiten ignoriert werden.

Erkennen der Wischrichtung

In den obigen Beispielen wird die Direction-Eigenschaft auf einen einzelnen Wert aus der SwipeDirection-Enumeration festgelegt. Es ist jedoch auch möglich, diese Eigenschaft auf mehrere Werte aus der SwipeDirection-Enumeration festzulegen, sodass das Swiped-Ereignis als Antwort auf eine Wischbewegung in mehrere Richtungen ausgelöst wird. 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:

var 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>

Hier der entsprechende C#-Code:

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
var rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
var upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
var 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);

Hinweis

In den obigen Beispielen reagiert derselbe Ereignishandler auf die Auslösung des Swiped-Ereignisses. Falls erforderlich kann jedoch jede SwipeGestureRecognizer-Instanz einen anderen Ereignishandler verwenden.

Reagieren auf die Wischbewegung

Ein Ereignishandler für das Swiped-Ereignis wird im folgenden Beispiel gezeigt:

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.

Verwenden von Befehlen

Die SwipeGestureRecognizer-Klasse enthält auch Command- und CommandParameter-Eigenschaften. Diese Eigenschaften werden in der Regel in Anwendungen mit Model View ViewModel (MVVM)-Muster verwendet. Die Command-Eigenschaft definiert den ICommand, der aufgerufen werden soll, wenn eine Wischbewegung erkannt wurde. Die CommandParameter-Eigenschaft definiert dabei ein Objekt, das an den ICommand. übergeben werden soll. Im folgenden Codebeispiel wird gezeigt, wie die Command-Eigenschaft an einen ICommand gebunden wird, der im Ansichtsmodell definiert und dessen Instanz als BindingContext-Eigenschaft der Seite festgelegt wurde:

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left, CommandParameter = "Left" };
leftSwipeGesture.SetBinding(SwipeGestureRecognizer.CommandProperty, "SwipeCommand");
boxView.GestureRecognizers.Add(leftSwipeGesture);

Der entsprechende XAML-Code lautet wie folgt:

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Command="{Binding SwipeCommand}" CommandParameter="Left" />
    </BoxView.GestureRecognizers>
</BoxView>

SwipeCommand ist eine Eigenschaft vom Typ ICommand, der in der Ansichtsmodellinstanz definiert und als BindingContext-Eigenschaft der Seite festgelegt wurde. Wenn eine Wischbewegung erkannt wurde, wird die Execute-Methode des SwipeCommand-Objekts ausgeführt. Das Argument an die Execute-Methode ist der Wert der CommandParameter-Eigenschaft. Weitere Informationen zu Befehlen finden Sie unter The Xamarin.Forms Command Interface (Die Xamarin.Forms-Befehlsschnittstelle).

Erstellen eines Wischcontainers

Die SwipeContainer-Klasse, die im folgenden Codebeispiel gezeigt wird, ist eine verallgemeinerte Klasse zur Erkennung von Wischbewegungen, die eine View-Klasse umschließen kann, um die Erkennung von Wischbewegungen 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)
    {
        var 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:

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

Das folgende Codebeispiel veranschaulicht, wie die Klasse SwipeContainer ein BoxView-Element auf einer C#-Seite umschließt:

public class SwipeContainerPageCS : ContentPage
{
    public SwipeContainerPageCS()
    {
        var boxView = new BoxView { Color = Color.Teal, ... };
        var swipeContainer = new SwipeContainer { Content = boxView, ... };
        swipeContainer.Swipe += (sender, e) =>
        {
          // Handle the swipe
        };

        Content = new StackLayout
        {
            Children = { swipeContainer }
        };
    }
}

Wenn die BoxView-Klasse eine Wischbewegung empfängt, wird das Swiped-Ereignis in der SwipeGestureRecognizer-Klasse 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.