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

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

Необходимые компоненты

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

Пример

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

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

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

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

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

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