Freigeben über

Verbessern vorhandener ScrollViewer-Erfahrungen

In diesem Artikel wird erläutert, wie Sie einen WinUI 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:

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. das Scrollen, um eine Weichzeichneranimation eines Hintergrunds oder die Position eines "Sticky Headers" 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öglicht es der App, ein stärkeres Zusammengehörigkeitsgefühl zu erzeugen, wodurch die Erfahrungen für die Endbenutzer einprägsamer 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- und Vordergrundinhalte relativ zur Bildlaufposition zu bewegen.
  • StickyHeaders – Die Position eines ScrollViewers verwenden, um eine Kopfzeile zu animieren und an einer Position festzukleben
  • Input-Driven Effekte – Verwenden Sie die Position eines Scrollviewers, um einen Kompositionseffekt wie Weichzeichnen zu animieren.

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

Listenansicht mit Parallaxe

Eine schüchterne Kopfzeile

Verwendung von ScrollViewerManipulationPropertySet

Um diese dynamischen Erlebnisse mit einem XAML ScrollViewer zu erstellen, müssen Sie in der Lage sein, auf die Bildlaufposition in einer Animation zuzugreifen. 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 zum Einstieg:

  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 das Property Set nicht von der Garbage Collection bereinigt wird und somit keinen Einfluss auf die ExpressionAnimation hat, in der es referenziert wird. ExpressionAnimations behalten keinen starken Verweis auf eines der objekte, die in der Formel verwendet werden.

Beispiel

Schauen wir uns an, wie das oben gezeigte Parallax-Beispiel zusammengesetzt 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 Gleichung definiert, die die Scroll-Position des ScrollViewers 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 verwenden Sie diese ExpressionAnimation, um das visuelle Objekt anzusprechen, das Sie durch Parallaxeneffekte bewegen 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);
  • Last updated on