Поделиться через

Улучшение существующих возможностей ScrollViewer

В этой статье объясняется, как использовать XAML ScrollViewer и ExpressionAnimations для создания динамических интерфейсов перемещения на основе входных данных.

Предпосылки

Здесь предполагается, что вы знакомы с понятиями, описанными в следующих статьях:

Зачем строить на основе ScrollViewer?

Как правило, для создания прокручиваемой и масштабируемой поверхности для содержимого приложения используется существующий XAML ScrollViewer. С введением языка Fluent Design теперь следует сосредоточиться на том, как использовать действие прокрутки или масштабирования элемента интерфейса для придания динамичности другим элементам интерфейса. Например, использование прокрутки для управления анимацией размытия фона или позиционирования "прилипающего заголовка".

В этих сценариях вы используете поведение или манипуляции, такие как прокрутка и масштабирование, чтобы сделать другие части приложения более динамическими. Это в свою очередь позволяет приложению чувствовать себя более сплоченным, что делает опыт более запоминающимся в глазах конечных пользователей. Благодаря тому, что пользовательский интерфейс приложения более запоминается, конечные пользователи будут взаимодействовать с приложением чаще и в течение более длительных периодов.

Что можно создать на основе ScrollViewer?

Вы можете использовать позицию ScrollViewer для создания ряда динамических возможностей:

  • Parallax — используйте положение ScrollViewer, чтобы перемещать фоновое или переднее содержимое с относительной скоростью относительно положения прокрутки.
  • StickyHeaders — используйте положение ScrollViewer, чтобы анимировать и закрепить заголовок на месте.
  • Input-Driven Эффекты — используйте позицию Scrollviewer для анимации композиционного эффекта, например, размытия.

Как правило, используя позицию ScrollViewer с помощью ExpressionAnimation, вы можете создать анимацию, которая динамически изменяется в зависимости от величины прокрутки.

представление списка с параллаксом

застенчивый заголовок

Использование ScrollViewerManipulationPropertySet

Чтобы создать эти динамические интерфейсы с помощью XAML ScrollViewer, необходимо иметь возможность ссылаться на позицию прокрутки в анимации. Это делается путем доступа к CompositionPropertySet из XAML ScrollViewer под названием ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet содержит одно свойство Vector3 с именем Translation, которое предоставляет доступ к позиции прокрутки ScrollViewer. Затем вы можете ссылаться на это, как и на любой другой CompositionPropertySet в ExpressionAnimation.

Общие шаги по началу работы:

  1. Доступ к ScrollViewerManipulationPropertySet с помощью ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Создайте анимацию ExpressionAnimation, которая ссылается на свойство Translation из PropertySet.
    • Не забудьте задать параметр ссылки!
  3. Нацельте свойство CompositionObject, используя ExpressionAnimation.

Замечание

Рекомендуется присвоить PropertySet, возвращаемый методом GetScrollViewerManipulationPropertySet, переменной класса. Это гарантирует, что набор свойств не очищается сборщиком мусора и поэтому не влияет на ExpressionAnimation, на которое оно ссылается. ExpressionAnimations не поддерживает сильную ссылку ни на один из объектов, используемых в уравнении.

Пример

Давайте посмотрим, как собран пример Parallax, показанный выше. Для справки все исходные коды для приложения находятся в репозитории Window UI Dev Labs наGitHub.

Сначала нужно получить ссылку на ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Следующий шаг — создать ExpressionAnimation, определяющую уравнение, которое использует положение прокрутки элемента ScrollViewer.

_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))";

Замечание

Вспомогательные классы ExpressionBuilder также можно использовать для создания этого же выражения без необходимости в строках:

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

Наконец, вы используете этот ExpressionAnimation и направляете его на визуальный элемент, который вы хотите сделать параллаксом. В этом случае это изображение для каждого элемента в списке.

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