Verbessern vorhandener ScrollViewer-Umgebungen

In diesem Artikel wird erläutert, wie Sie einen XAML ScrollViewer und ExpressionAnimations verwenden, um dynamische eingabegesteuerte Bewegungsoberflächen zu erstellen.

Voraussetzungen

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

• Eingabegesteuerte Animationen
• Auf Beziehungen basierende Animationen

Warum auf ScrollViewer aufbauen?

In der Regel verwenden Sie den vorhandenen XAML-ScrollViewer, um eine bildlauffähige und zoombare Oberfläche für Ihre App-Inhalte zu erstellen. Mit der Einführung der Fluent Design-Sprache sollten Sie sich jetzt auch darauf konzentrieren, wie Sie den Vorgang zum Scrollen oder Zoomen einer Oberfläche verwenden, um andere Bewegungsfunktionen zu fördern. Verwenden Sie z. B. scrollen, um eine Weichzeichneranimation eines Hintergrunds zu steuern oder die Position einer "Sticky Header" zu steuern.

In diesen Szenarien nutzen Sie das Verhalten oder die Manipulationsfunktionen wie Scrollen und Zoomen, um andere Teile Ihrer App dynamischer zu gestalten. Dies wiederum ermöglichen es der App, sich stärker in die Augen der Endbenutzer einzufühlen, sodass die Erfahrungen in den Augen der Endbenutzer besser einprägsam werden. Indem die App-UI einprägsamer wird, interagieren Endbenutzer häufiger und länger mit der App.

Was können Sie auf ScrollViewer aufbauen?

Sie können die Position eines ScrollViewer nutzen, um eine Reihe dynamischer Erfahrungen zu erstellen:

• Parallax – Verwenden Sie die Position eines ScrollViewer, um Hintergrund- oder Vordergrundinhalte relativ zur Bildlaufposition zu verschieben.
• StickyHeaders – Verwenden der Position eines ScrollViewer zum Animieren und "Sticken" einer Kopfzeile an einer Position
• Eingabegesteuerte Effekte – Verwenden Sie die Position eines Scrollviewers, um einen Kompositionseffekt wie Weichzeichnen zu animieren.

Im Allgemeinen können Sie durch Verweisen auf die Position eines ScrollViewers mit einer ExpressionAnimation eine Animation erstellen, die sich dynamisch relativ zum Bildlaufbetrag ändert.

Verwenden von ScrollViewerManipulationPropertySet

Um diese dynamischen Oberflächen mit einem XAML ScrollViewer zu erstellen, müssen Sie in der Lage sein, auf die Bildlaufposition in einer Animation zu verweisen. Dies geschieht durch Den Zugriff auf ein CompositionPropertySet aus dem XAML ScrollViewer namens ScrollViewerManipulationPropertySet. Das ScrollViewerManipulationPropertySet enthält eine einzelne Vector3-Eigenschaft namens Translation, die Zugriff auf die Bildlaufposition des ScrollViewer ermöglicht. Sie können dann wie jedes andere CompositionPropertySet in Ihrer ExpressionAnimation auf diese Verweisen.

Allgemeine Schritte für die ersten Schritte:

1. Greifen Sie über ElementCompositionPreview auf das ScrollViewerManipulationPropertySet zu.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Erstellen Sie eine ExpressionAnimation, die auf die Translation-Eigenschaft aus dem PropertySet verweist.
   • Vergessen Sie nicht, den Referenzparameter festzulegen!
3. Zielen Sie auf die Eigenschaft eines CompositionObject mit der ExpressionAnimation ab.

Hinweis

Es wird empfohlen, das propertySet, das von der GetScrollViewerManipulationPropertySet-Methode zurückgegeben wird, einer Klassenvariablen zuzuweisen. Dadurch wird sichergestellt, dass der Eigenschaftensatz nicht von der automatischen Speicherbereinigung gesäubert wird und somit keine Auswirkungen auf die ExpressionAnimation hat, auf die verwiesen wird. ExpressionAnimations haben keinen eindeutigen Verweis auf eines der in der Formel verwendeten Objekte.

Beispiel

Sehen wir uns an, wie das oben gezeigte Parallax-Beispiel zusammengetragen wird. Zur Referenz finden Sie den gesamten Quellcode für die App im Repository "Window UI Dev Labs" auf GitHub.

Als Erstes erhalten Sie einen Verweis auf das ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Der nächste Schritt besteht darin, die ExpressionAnimation zu erstellen, die eine Formel definiert, die die Bildlaufposition des ScrollViewer verwendet.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Hinweis

Sie können auch ExpressionBuilder-Hilfsklassen verwenden, um diesen Ausdruck zu erstellen, ohne dass Zeichenfolgen erforderlich sind:

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Schließlich nehmen Sie diese ExpressionAnimation und zielen auf das visuelle Element ab, das Sie parallax möchten. In diesem Fall ist es das Bild für jedes element in der Liste.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);