Пользовательские операции с помощью InteractionTracker

В этой статье показано, как использовать InteractionTracker для создания пользовательских интерфейсов манипуляций.

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

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

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

Зачем создавать пользовательские интерфейсы манипуляций?

В большинстве случаев использование предварительно созданных элементов управления манипуляцией достаточно хорошо для создания интерфейсов пользовательского интерфейса. Но что делать, если вы хотите отличить от общих элементов управления? Что делать, если вы хотите создать определенный интерфейс, управляемый входными данными или иметь пользовательский интерфейс, где традиционное движение манипуляции недостаточно? Именно в этом случае возникает создание пользовательских интерфейсов. Они позволяют разработчикам приложений и дизайнерам быть более творческими — принести в жизнь опыт движения, которые лучше демонстрируют свой брендинг и пользовательский язык дизайна. С нуля вы получите доступ к правому набору стандартных блоков, чтобы полностью настроить интерфейс манипуляции — от того, как движение должно реагировать пальцем на экране и с экрана, чтобы оснастки точек и входных цепочек.

Ниже приведены некоторые распространенные примеры создания пользовательского интерфейса манипуляции:

• Добавление пользовательского пальцем, удаление и закрытие поведения
• Эффекты на основе входных данных (сдвиг приводит к размытию содержимого)
• Настраиваемые элементы управления с настраиваемыми движениями манипуляций (custom ListView, ScrollViewer и т. д.)

Зачем использовать InteractionTracker?

InteractionTracker появился в пространстве имен Windows.UI.Composition.Interactions в версии пакета SDK 10586. InteractionTracker включает:

• Полная гибкость — мы хотим, чтобы вы могли настраивать и настраивать каждый аспект взаимодействия с манипуляцией; в частности, точные движения, возникающие во время или в ответ на ввод. При создании пользовательского интерфейса манипуляции с Помощью InteractionTracker все необходимые ручки находятся в вашем распоряжении.
• Smooth Performance — одна из проблем с взаимодействием с манипуляциями заключается в том, что их производительность зависит от потока пользовательского интерфейса. Это может негативно повлиять на любой опыт манипуляции при занятом пользовательском интерфейсе. InteractionTracker был создан для использования нового обработчика анимации, который работает на независимом потоке на 60 FPS, что приводит к плавному движении.

Обзор: InteractionTracker

При создании пользовательских интерфейсов манипуляций существует два основных компонента, с которыми вы взаимодействуете. Сначала мы обсудим следующие вопросы:

• InteractionTracker — основной объект, поддерживающий компьютер состояния, свойства которого управляются активными входными данными пользователя или прямыми обновлениями и анимациями. Затем он предназначен для привязки к CompositionAnimation для создания пользовательского движения манипуляции.
• VisualInteractionSource — объект дополнения, определяющий, когда и при каких условиях входные данные отправляются в InteractionTracker. Он определяет как CompositionVisual, используемый для хит-тестирования, так и другие свойства входной конфигурации.

В качестве компьютера состояния свойства InteractionTracker можно управлять любым из следующих элементов:

• Прямое взаимодействие с пользователем — конечный пользователь напрямую управляет в регионе visualInteractionSource hit-test
• Инерция — от программной скорости или жеста пользователя, свойств анимации InteractionTracker под кривой инерции
• CustomAnimation — настраиваемая анимация непосредственно для свойства InteractionTracker

Компьютер состояния InteractionTracker

Как упоминание ранее, InteractionTracker является машиной состояния с 4 состояниями - каждый из которых может перейти к любому из других четырех состояний. (Дополнительные сведения о том, как ВзаимодействиеTracker переходит между этими состояниями, см. в разделеДокументация по классу InteractionTracker .)

State	Description
Бездействие	Нет активных, входных данных или анимаций
Взаимодействие	Обнаружены активные входные данные пользователя
Инерция	Активное движение, полученное от активного ввода или программной скорости
CustomAnimation	Активное движение, полученное из пользовательской анимации

В каждом из случаев, когда состояние InteractionTracker изменяется, создается событие (или обратный вызов), которое можно прослушивать. Чтобы вы прослушивали эти события, они должны реализовать интерфейс IInteractionTrackerOwnerOwner и создать объект InteractionTracker с помощью метода CreateWithOwner. На следующей схеме также описывается, когда активируются различные события.

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

Для взаимодействияTracker для управления входными данными необходимо подключить к нему VisualInteractionSource (VIS). Vis создается как объект дополнения с помощью CompositionVisual для определения:

1. Область проверки попадания, которую будут отслеживать входные данные, и жесты пространства координат обнаруживаются в
2. Ниже перечислены конфигурации входных данных, которые будут обнаруживаться и направляться.
   • Обнаруживаемые жесты: положение X и Y (горизонтальное и вертикальное сдвига), масштабирование (сцепление)
   • Инерция
   • Rails & Chaining
   • Режимы перенаправления: какие входные данные перенаправляются автоматически в InteractionTracker

Примечание.

Так как VisualInteractionSource создается на основе позиции теста попадания и координат визуального элемента, рекомендуется не использовать визуальный элемент, который будет находиться в движении или изменяющемся положении.

Примечание.

Вы можете использовать несколько экземпляров VisualInteractionSource с одинаковым элементом InteractionTracker, если существует несколько областей тестирования попаданий. Однако наиболее распространенным случаем является использование только одного VIS.

VisualInteractionSource также отвечает за управление входными данными из различных модальности (касания, PTP, пера), которые направляются в InteractionTracker. Это поведение определяется свойством ManipulationRedirectionMode. По умолчанию все входные данные указателя отправляются в поток пользовательского интерфейса, а входные данные Touchpad точности передаются в VisualInteractionSource и InteractionTracker.

Таким образом, если требуется использовать touch and Pen (Creators Update) для управления манипуляцией с помощью VisualInteractionSource и InteractionTracker, необходимо вызвать метод VisualInteractionSource.TryRedirectForManipulation. В кратком фрагменте ниже из приложения XAML метод вызывается при нажатии сенсорного события в верхней части сетки UIElement:

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Связь с ExpressionAnimations

При использовании InteractionTracker для управления процессом манипуляции вы взаимодействуете главным образом со свойствами Scale и Position. Как и другие свойства CompositionObject, эти свойства могут быть как целевыми, так и ссылаться на них в CompositionAnimation, чаще всего ExpressionAnimations.

Чтобы использовать InteractionTracker в выражении, обратитесь к свойству position (or Scale) средства отслеживания, как показано в приведенном ниже примере. Поскольку свойство InteractionTracker изменяется из-за каких-либо условий, описанных ранее, выходные данные выражения также изменяются.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Примечание.

При ссылке на позицию InteractionTracker в выражении необходимо отменить значение для результирующего выражения, чтобы перемещаться в правильном направлении. Это связано с тем, что прогрессия InteractionTracker от происхождения на графе и позволяет думать о прогрессии InteractionTracker в "реальном мире" координат, таких как расстояние от его происхождения.

Начать

Чтобы приступить к работе с помощью InteractionTracker для создания пользовательских интерфейсов манипуляций, выполните следующие действия.

1. Создайте объект InteractionTracker с помощью InteractionTracker.Create или InteractionTracker.CreateWithOwner.
   • (Если вы используете CreateWithOwner, убедитесь, что вы реализуете интерфейс IInteractionTrackerOwner.)
2. Задайте положение Min и Max созданного элемента InteractionTracker.
3. Создайте VisualInteractionSource с помощью CompositionVisual.
   • Убедитесь, что в передаваемом визуальном элементе имеется ненулевой размер. В противном случае он не будет проверен правильно.
4. Задайте свойства VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Rails & Chaining
5. Добавьте VisualInteractionSource в InteractionTracker с помощью InteractionTracker.InteractionSources.Add.
6. Настройка TryRedirectForManipulation для обнаружения входных данных касания и пера.
   • Для XAML это обычно выполняется в событии PointerPressed uiElement.
7. Создайте ВыражениеAnimation, которое ссылается на позицию InteractionTracker и нацелите свойство CompositionObject.

Ниже приведен краткий фрагмент кода, показывающий #1 – 5 в действии:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Дополнительные сведения об использовании InteractionTracker см. в следующих статьях:

• Создание точек оснастки с помощью инерционныхmodifiers
• Извлечение и обновление с помощью SourceModifiers