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

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

Необходимые условия

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

• Анимации на основе входных данных
• Анимации на основе реляционных данных

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

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

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

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

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

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

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

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

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

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

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

Замечание

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

Пример

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

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

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

Следующий шаг — создать анимацию выражения, определяющую уравнение, использующее позицию прокрутки 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;

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

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