Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker

In diesem Artikel wird gezeigt, wie Sie InteractionTracker verwenden, um benutzerdefinierte Manipulationsfunktionen zu erstellen.

Voraussetzungen

Hier wird davon ausgegangen, dass Sie mit den in den folgenden Artikeln erläuterten Konzepten vertraut sind:

• Eingabegesteuerte Animationen
• Beziehungsbasierte Animationen

Warum benutzerdefinierte Manipulationsfunktionen erstellen?

In den meisten Fällen sind die Verwendung der vordefinierten Manipulationssteuerelemente gut genug, um Ui-Oberflächen zu erstellen. Aber was wäre, wenn Sie sich von den gemeinsamen Steuerelementen unterscheiden wollten? Was geschieht, wenn Sie eine bestimmte Benutzeroberfläche erstellen möchten, die durch Eingaben gesteuert wird, oder eine Benutzeroberfläche haben, auf der eine herkömmliche Manipulationsbewegung nicht ausreicht? Hier kommt die Erstellung von benutzerdefinierten Erlebnissen ins Spiel. Sie ermöglichen App-Entwicklern und Designern, kreativer zu sein – und Bewegungserfahrungen zu schaffen, die ihre Markenidentität und benutzerdefinierte Designsprache besser veranschaulichen. Von Grund auf erhalten Sie Zugriff auf die richtige Gruppe von Bausteinen, um eine Manipulationserfahrung vollständig anzupassen – von der Bewegung mit dem Finger an und vom Bildschirm bis hin zu Andockpunkten und Eingabeketten.

Im Folgenden finden Sie einige häufige Beispiele für das Erstellen einer benutzerdefinierten Manipulationserfahrung:

• Hinzufügen eines benutzerdefinierten Wisch-, Lösch-/Verwerfenverhaltens
• Eingabegesteuerte Effekte (Schwenken bewirkt, dass Inhalte verschwimmen)
• Benutzerdefinierte Steuerelemente mit maßgeschneiderten Manipulationsbewegungen (benutzerdefinierte ListView, ScrollViewer usw.)

Warum InteractionTracker verwenden?

InteractionTracker ist im Namespace "Microsoft.UI.Composition.Interactions" für WinUI- und Windows App SDK-Apps verfügbar. InteractionTracker ermöglicht Folgendes:

• Volle Flexibilität – wir möchten, dass Sie jeden Aspekt eines Manipulationsprozesses individuell gestalten und anpassen können, insbesondere die genauen Bewegungen, die während der Eingabe oder als Reaktion darauf stattfinden. Beim Erstellen einer benutzerdefinierten Manipulationserfahrung mit InteractionTracker stehen Ihnen alle benötigten Knobs zur Verfügung.
• Reibungslose Leistung – eine der Herausforderungen bei Manipulationserfahrungen besteht darin, dass ihre Leistung vom UI-Thread abhängig ist. Dies kann sich negativ auf die Manipulationserfahrung auswirken, wenn die Benutzeroberfläche ausgelastet ist. InteractionTracker wurde entwickelt, um das neue Animationsmodul zu verwenden, das auf einem unabhängigen Thread mit 60 FPS arbeitet, was zu einer reibungslosen Bewegung führt.

Übersicht: InteractionTracker

Beim Erstellen benutzerdefinierter Manipulationsfunktionen gibt es zwei primäre Komponenten, mit denen Sie interagieren. Wir werden zuerst die folgenden Themen besprechen:

• InteractionTracker – das Kernobjekt, das einen Zustandsautomat verwaltet, dessen Eigenschaften durch aktive Benutzereingaben oder direkte Aktualisierungen und Animationen gesteuert werden. Es soll dann an eine CompositionAnimation gebunden werden, um die benutzerdefinierte Manipulationsbewegung zu erstellen.
• VisualInteractionSource – ein Ergänzungsobjekt, das definiert, wann und unter welchen Bedingungen Eingaben an InteractionTracker gesendet werden. Es definiert sowohl das CompositionVisual, das für Treffertests verwendet wird, als auch andere Eingabekonfigurationseigenschaften.

Als Zustandsautomat können die Eigenschaften von InteractionTracker durch eine der folgenden Optionen gesteuert werden:

• Direkte Benutzerinteraktion – der Endbenutzer interagiert direkt mit dem Hit-Testbereich von VisualInteractionSource.
• Inertie – Eigenschaften des InteractionTracker werden entweder durch programmgesteuerte Geschwindigkeit oder eine Benutzergeste unter einer Inertiakurve animiert.
• CustomAnimation – eine benutzerdefinierte Animation, die direkt auf eine Eigenschaft von InteractionTracker ausgerichtet ist

InteractionTracker Zustandsautomat

Wie bereits erwähnt, ist InteractionTracker ein Zustandsautomat mit 4 Zuständen, von denen jeder zu einem der anderen vier Zustände wechseln kann. (Weitere Informationen dazu, wie InteractionTracker zwischen diesen Zuständen wechselt, finden Sie in der Dokumentation zur InteractionTracker-Klasse .)

State	Beschreibung
Idle	Keine aktiven Benutzereingaben oder Animationen
Interaktion	Aktive Benutzereingabe erkannt
Trägheit	Aktive Bewegung, die sich aus aktiver Eingabe oder programmgesteuerter Geschwindigkeit ergibt
Benutzerdefinierte Animation	Aktive Bewegung, die sich aus einer benutzerdefinierten Animation ergibt

In jedem Fall, in dem sich der Status von InteractionTracker ändert, wird ein Ereignis (oder ein Rückruf) generiert, auf das Sie lauschen können. Damit Sie auf diese Ereignisse lauschen können, müssen sie die IInteractionTrackerOwner-Schnittstelle implementieren und ihr InteractionTracker-Objekt mit der CreateWithOwner-Methode erstellen. Im folgenden Diagramm wird auch beschrieben, wann die verschiedenen Ereignisse ausgelöst werden.

Verwenden von VisualInteractionSource

Damit InteractionTracker von Input gesteuert wird, müssen Sie eine VisualInteractionSource (VIS) mit ihr verbinden. Das VIS wird als Ergänzungsobjekt mit einem CompositionVisual erstellt, um Folgendes zu definieren:

1. Der Trefferbereich, in dem die Eingabe nachverfolgt wird, und in dem die Gesten im Koordinatenraum erkannt werden.
2. Die Konfigurationen der Eingabe, die erkannt und weitergeleitet werden, umfassen einige:
   • Erkennbare Gesten: Position X und Y (horizontales und vertikales Schwenken), Skalierung (Zoom durch Kneifen)
   • Trägheit
   • Rails & Chaining
   • Umleitungsmodi: Welche Eingabedaten automatisch an InteractionTracker umgeleitet werden

Hinweis

Da VisualInteractionSource basierend auf der Treffertestposition und dem Koordinatenbereich eines visuellen Elements erstellt wird, wird empfohlen, kein Visual zu verwenden, das sich in Bewegung befindet oder die Position ändert.

Hinweis

Sie können mehrere VisualInteractionSource-Instanzen mit demselben InteractionTracker verwenden, wenn mehrere Treffertestbereiche vorhanden sind. Am häufigsten wird jedoch nur ein VIS verwendet.

VisualInteractionSource ist auch für die Verwaltung verantwortlich, wenn Eingabedaten aus verschiedenen Modalitäten (Toucheingabe, PTP, Stift) an InteractionTracker weitergeleitet werden. Dieses Verhalten wird durch die ManipulationRedirectionMode-Eigenschaft definiert. Standardmäßig werden alle Zeigereingaben an den UI-Thread gesendet, und die Precision-Touchpad-Eingaben werden an VisualInteractionSource und InteractionTracker gesendet.

Wenn Sie also Touch und Stift (Creators Update) verwenden möchten, um eine Manipulation über eine VisualInteractionSource und InteractionTracker zu steuern, müssen Sie die VisualInteractionSource.TryRedirectForManipulation-Methode aufrufen. Im folgenden kurzen Codeausschnitt aus einer XAML-App wird die Methode aufgerufen, wenn am oberen Rand des UIElement-Rasters ein Toucheingabeereignis auftritt:

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Verknüpfen mit ExpressionAnimations

Wenn Sie InteractionTracker verwenden, um eine Manipulation zu fördern, interagieren Sie in erster Linie mit den Skalierungs- und Positionseigenschaften. Wie andere CompositionObject-Eigenschaften können diese Eigenschaften sowohl das Ziel als auch die Referenz in einer CompositionAnimation sein, wobei ExpressionAnimations am häufigsten verwendet werden.

Wenn Sie InteractionTracker innerhalb eines Ausdrucks verwenden möchten, verweisen Sie wie im folgenden Beispiel auf die Position (oder Scale)-Eigenschaft des Trackers. Da die Eigenschaft von InteractionTracker aufgrund einer der zuvor beschriebenen Bedingungen modifiziert wird, ändert sich auch die Ausgabe der Expression.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Hinweis

Wenn Sie auf die Position von InteractionTracker in einem Ausdruck verweisen, müssen Sie den Wert für den resultierenden Ausdruck negieren, damit er in die richtige Richtung verschoben wird. Dies liegt daran, dass der Fortschritt des InteractionTrackers vom Ursprung eines Graphen ausgeht, sodass Sie über den Fortschritt des InteractionTrackers in Koordinaten der realen Welt nachdenken können, z. B. Entfernung von seinem Ursprung.

Erste Schritte

So beginnen Sie mit der Verwendung von InteractionTracker zum Erstellen benutzerdefinierter Manipulationsfunktionen:

1. Erstellen Sie Ihr InteractionTracker-Objekt mit InteractionTracker.Create oder InteractionTracker.CreateWithOwner.
   • (Wenn Sie CreateWithOwner verwenden, stellen Sie sicher, dass Sie die IInteractionTrackerOwner-Schnittstelle implementieren.)
2. Legen Sie die Min- und Max-Position Des neu erstellten InteractionTracker fest.
3. Erstellen Sie VisualInteractionSource mit einem CompositionVisual.
   • Stellen Sie sicher, dass das visuelle Element, das Sie übergeben, eine Nicht-Null-Größe aufweist. Andernfalls wird es nicht richtig getestet.
4. Legen Sie die Eigenschaften der VisualInteractionSource fest.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Schienen & Verkettung
5. Fügen Sie VisualInteractionSource mithilfe von InteractionTracker.InteractionSources.Add zu InteractionTracker hinzu.
6. Einrichtung von TryRedirectForManipulation bei Detektierung von Touch- und Stifteingaben.
   • Bei XAML wird dies normalerweise mit dem PointerPressed-Ereignis des UIElements durchgeführt.
7. Erstellen Sie eine ExpressionAnimation, die auf die Position des InteractionTrackers verweist und die Eigenschaft eines CompositionObject anvisiert.

Hier ist ein kurzer Codeausschnitt, der #1 – 5 in Aktion zeigt:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Weitere erweiterte Verwendungen von InteractionTracker finden Sie in den folgenden Artikeln:

• Erstellen von Andockpunkten mit InertiaModifiern
• Pull-to-Refresh mit SourceModifiers