Руководство разработчика по взаимодействию с сенсорной связью

Создайте приложение с ожиданием того, что сенсорный ввод будет основным методом ввода пользователей. Если вы используете элементы управления WinUI, поддержка тачпада, мыши и пера не требует дополнительного программирования, так как приложения WinUI предоставляют это бесплатно.

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

Важные API: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Многие устройства имеют много сенсорные экраны, поддерживающие использование одного или нескольких пальцев (или сенсорных контактов) в качестве входных данных. Сенсорные контакты и их движение интерпретируются как жесты и манипуляции для поддержки различных взаимодействий пользователей.

Windows app включает в себя ряд различных механизмов обработки сенсорного ввода, что позволяет создавать иммерсивный интерфейс, который пользователи могут изучить с уверенностью. Здесь мы рассмотрим основы использования сенсорного ввода в Windows app.

Для взаимодействия с сенсорной связью требуются три вещи:

  • Сенсорный дисплей.
  • Прямой контакт (или близкое расположение, если на дисплее есть датчики близости и он поддерживает обнаружение наведения) одного или нескольких пальцев на этом дисплее.
  • Перемещение контактов касания (или их отсутствие на основе порогового значения времени).

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

  • Интерпретируется как физический жест для прямого управления одним или несколькими элементами пользовательского интерфейса, такими как сдвиг, поворот, изменение размера или перемещение. (В отличие от этого, взаимодействие с элементом с помощью properties window, диалогового окна или другого пользовательского интерфейса рассматривается как непрямая манипуляция.)
  • Признан альтернативным методом ввода, таким как мышь или перо.
  • Используется для дополнения или изменения аспектов других методов ввода, таких как размазывание линии, нарисованной пером.

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

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

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

Помните, что традиционные устройства ввода (например, мышь и клавиатура) знакомы и привлекательны для многих пользователей. Они могут предлагать скорость, точность и тактильную обратную связь, которую сенсорные интерфейсы не могут обеспечить.

Предоставление уникальных и отличительных возможностей взаимодействия для всех устройств ввода будет поддерживать самый широкий спектр возможностей и предпочтений, обратиться к самой широкой аудитории и привлечь больше клиентов к вашему приложению.

Сравнение требований к сенсорному взаимодействию

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

Фактор Сенсорные взаимодействия Мышь, клавиатура, перо/стилус Сенсорный панель
Точность Область контакта пальцем больше одной координаты x-y, что повышает вероятность непреднамеренных активаций команд. Мышь и перо/стилус предоставляют точную координату x-y. То же, что и мышь.
Форма области контакта изменяется на протяжении всего движения. Движения мыши и штрихи пером/стилусом предоставляют точные координаты x-y. Фокус клавиатуры явный. То же, что и мышь.
Курсор мыши не используется для ориентации. Курсор мыши, курсор пера/стилуса и фокус клавиатуры помогают с наведением. То же, что и мышь.
Анатомия человека Движения пальцев неточны, потому что прямолинейное движение с одним или несколькими пальцами затруднительно. Это связано с кривизной суставов рук и количеством суставов, участвующих в движении. Проще выполнить прямую линию с помощью мыши или стилуса, поскольку рука, которая их удерживает, проходит более короткое физическое расстояние, чем курсор на экране. То же, что и мышь.
Некоторые области на сенсорной поверхности устройства дисплея могут быть труднодоступны из-за положения пальца и способа удержания устройства пользователем. Мышь и перо/стилус могут достичь любой части экрана, а любые элементы управления должны быть доступны с помощью табуляции на клавиатуре. Положение пальцев и захват могут быть проблемой.
Объекты могут быть скрыты одним или несколькими кончиками пальцев или рукой пользователя. Это называется окклюзией. Непрямые входные устройства не вызывают окклюзии. То же, что и мышь.
Состояние объекта Сенсорный интерфейс использует двухсоставную модель: сенсорная поверхность устройства с дисплеем либо задета (включено), либо не задета (выключено). Отсутствует состояние наведения указателя мыши, которое может активировать дополнительную визуальную обратную связь. Мышь, перо/стилус и клавиатура предоставляют трехсоставную модель: поднято (выкл.), опущено (вкл.) и нависание (фокус).
Наведение указателя мыши позволяет пользователям исследовать и изучать подсказки, связанные с элементами пользовательского интерфейса. Эффекты наведения и фокуса могут указать на интерактивные объекты и помочь в их восприятии.		 То же, что и мышь.
Расширенное взаимодействие Поддерживает мультитач: несколько точек ввода (касания пальцев) на сенсорной поверхности. Поддерживает одну входную точку. То же самое, что касание.
Поддерживает прямую манипуляцию объектами с помощью таких жестов, как касание, перетаскивание, скольжение, щипок и поворот. Нет поддержки для прямой манипуляции, так как мышь, перо/стилус и клавиатура являются косвенными устройствами ввода. То же, что и мышь.

Замечание

Косвенные входные данные имели преимущество более 25 лет уточнения. Функции, такие как подсказки, активируемые наведением, были разработаны для улучшения исследования пользовательского интерфейса, в частности с использованием сенсорной панели, мыши, пера/стилуса и ввода с клавиатуры. Функции пользовательского интерфейса, такие как это, были изменены для расширенного взаимодействия, предоставляемого сенсорным вводом, без ущерба для пользовательского интерфейса для этих других устройств.

Использование сенсорной обратной связи

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

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

Targeting

Целевая ориентация оптимизирована с помощью:

  • Размеры целевых элементов касания

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

  • Контактная геометрия

    Вся область контакта пальца определяет наиболее вероятный целевой объект.

  • Scrubbing

    Элементы в группе легко перенацеливаются путем перетаскивания пальца между ними (например, переключателей). Текущий элемент активируется при выпуске сенсорного ввода.

  • Качание

    Плотно упакованные элементы (например, гиперссылки) легко перенацеливаются путем нажатия пальца вниз и без скольжения, качая его назад и вперед над элементами. Из-за окклюзии текущий элемент определяется с помощью подсказки или строки состояния и активируется после снятия пальца с экрана.

Точность

Проектирование небрежных взаимодействий с помощью:

  • Точки привязки, которые могут упростить остановку в нужных позициях при взаимодействии пользователей с содержимым.
  • Направляющие "рельсы", которые могут помочь с вертикальным или горизонтальным панорамированием, даже если рука движется в небольшой дуге. Дополнительные сведения см. в руководстве по панорамированию.

Окклюзия

Проблема окклюзии пальцев и рук предотвращается посредством:

  • Размер и размещение пользовательского интерфейса

    Сделайте элементы пользовательского интерфейса достаточно большими, чтобы они не были полностью покрыты областью контакта пальцем.

    По возможности позиционировать меню и всплывающие окна над контактной областью.

  • Подсказки

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

    Для небольших объектов смещайте подсказки так, чтобы они не перекрывались областью контакта пальца. Это полезно для целевой аудитории.

  • Рукоятки для точности

    Где требуется точность (например, выделение текста), укажите дескриптор выделения, которые смещаются для повышения точности. Дополнительные сведения см. в разделе Руководство по выбору текста и изображений (приложений Windows Runtime).

Тайминг

Избегайте изменений в режиме времени в пользу прямого манипулирования. Прямая манипуляция имитирует прямую физическую обработку объекта в режиме реального времени. Объект отвечает по мере перемещения пальцев.

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

Прямая манипуляция обеспечивает ряд преимуществ по сравнению с временными взаимодействиями.

  • Мгновенный визуальный отзыв во время взаимодействия делает пользователей более заинтересованными, уверенными и способными контролировать ситуацию.
  • Прямые манипуляции делают изучение системы более безопасным, так как они обратимы, пользователи могут легко вернуться назад в своих действиях логическим и интуитивно понятным образом.
  • Взаимодействия, которые непосредственно влияют на объекты и имитируют реальные взаимодействия, являются более интуитивно понятными, обнаруживаемыми и запоминающимися. Они не полагаются на неясные или абстрактные взаимодействия.
  • Взаимодействие с временем может оказаться трудным, так как пользователи должны достичь произвольных и невидимых пороговых значений.

Кроме того, настоятельно рекомендуется выполнить следующие действия.

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

    Замечание

    Исключением из этого является использование взаимодействий с заданным временем, чтобы помочь в обучении и изучении (например, длительное нажатие и удержание).

  • Соответствующие описания и визуальные подсказки оказывают большое влияние на использование расширенных взаимодействий.

Представления интерфейсов

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

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

Параметры масштабирования применяются как к оптическому масштабированию (поддерживается элементом управления ScrollViewer), так и к элементу управления "Семантический масштаб". Семантическое масштабирование — это метод, оптимизированный для сенсорного ввода и предназначенный для навигации по большим наборам связанных данных или содержимого в одном представлении. Он работает с помощью двух различных режимов классификации или уровней масштабирования. Это аналогично панорамированию и прокрутке в одном представлении. Сдвиг и прокрутка могут использоваться в сочетании с Semantic Zoom.

Используйте представления и события приложения для изменения поведения сдвига или прокрутки и масштабирования. Это может обеспечить более плавное взаимодействие, чем возможно при обработке событий указателя и жестов.

Дополнительные сведения о представлениях приложений см. в разделах "Элементы управления", "Макеты" и "Текст".

Кастомные сенсорные интерфейсы

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

Это важно

Windows 11 и более поздней

Некоторые взаимодействия с использованием трех и четырех пальцев больше не будут работать в приложениях Windows по умолчанию.

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

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

Bluetooth-устройства & > Сенсорный > "Жесты касания с тремя и четырьмя пальцами"

Если задано значение "Вкл." (по умолчанию), система будет обрабатывать все взаимодействия с тремя и четырьмя пальцами (приложения не смогут поддерживать их).

Если задано значение Off, взаимодействие с тремя и четырьмя пальцами может поддерживаться приложениями (они не будут обрабатываться системой).

Если приложение должно поддерживать эти взаимодействия, рекомендуется сообщить пользователям об этом параметре и предоставить ссылку, которая запускает параметры Windows на соответствующую страницу (ms-settings:devices-touch). Дополнительные сведения см. в разделе "Запуск параметров Windows".

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

  • События статических жестов активируются после завершения взаимодействия. События жестов включают Косновение, Двойное косновение, Косновение правой кнопкой и Удерживание.

    События жестов для определённых элементов можно отключить, установив для IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled и IsHoldingEnabled значение false.

  • События указателя, такие как PointerPressed и PointerMoved, предоставляют низкоуровневые сведения для каждого сенсорного контакта, включая движение указателя и возможность различать события нажатия и отпускания.

    Указатель — это универсальный тип входных данных с единым механизмом событий. Оно предоставляет основные сведения, такие как, например, положение экрана, на активном источнике ввода, который может быть сенсорным, сенсорной панелью, мышью или пером.

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

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

Ниже приведен базовый набор жестов касания, поддерживаемых WinUI.

Имя Тип Description
Нажмите Статический жест Один палец касается экрана и поднимает вверх.
Нажмите и удерживайте Статический жест Один палец касается экрана и остается на месте.
слайд Жест манипуляции Один или несколько пальцев касаются экрана и перемещаются в том же направлении.
Проведите пальцем Жест манипуляции Один или несколько пальцев касаются экрана и перемещают короткое расстояние в том же направлении.
Повернуть Жест манипуляции Два или более пальцев касаются экрана и перемещаются по часовой стрелке или по часовой дуге.
Сжатие Жест манипуляции Два или более пальцев касаются экрана и перемещаются ближе друг к другу.
Растяжка Жест манипуляции Два или более пальцев касаются экрана и перемещаются дальше друг от друга.

События жестов

Дополнительные сведения о отдельных элементах управления см. в списке элементов управления.

События указателя

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

События указателя основаны на одной входной точке (палец, кончик пера, курсор мыши) и не поддерживают взаимодействия, основанные на скорости.

Ниже приведен список событий указателя и их связанный аргумент события.

Событие или класс Description
PointerPressed Происходит, когда один палец касается экрана.
PointerReleased Происходит, когда эта же точка касания убирается.
PointerMoved Происходит при перетаскивании указателя по экрану.
Указатель вошёл Происходит, когда указатель входит в область проверки попадания элемента.
PointerExited Происходит при выходе указателя из области теста попадания элемента.
УказательОтменен Происходит, когда сенсорный контакт ненормально потерян.
ПотеряЗахватаУказателя Происходит при захвате указателя другим элементом.
PointerWheelChanged Происходит при изменении разностного значения колесика мыши и при нажатии сенсорной панели.
PointerRoutedEventArgs Предоставляет данные для всех событий указателя.

В следующем примере показано, как использовать события PointerPressed, PointerReleased и PointerExited для обработки взаимодействия при нажатии на объект прямоугольника.

Сначала создается прямоугольник, который назван touchRectangle, в языке разметки расширяемых приложений (XAML).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Затем задаются прослушиватели для событий PointerPressed, PointerReleased и PointerExited.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Наконец, обработчик событий PointerPressed увеличивает высоту и ширинупрямоугольника, а обработчики событий PointerReleased и PointerExited возвращают высоту и ширину к их исходным значениям.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

События манипуляции

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

События манипуляции можно использовать для обнаружения взаимодействий, таких как перетаскивание, масштабирование и удержание.

Замечание

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

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

Событие или класс Description
Событие ManipulationStarting Возникает при первом создании обработчика манипуляций.
Событие ManipulationStarted Происходит, когда устройство ввода начинает манипуляцию с UIElement.
Событие ManipulationDelta Происходит при изменении положения входного устройства во время манипуляции.
Событие ManipulationInertiaStarting Происходит, когда входное устройство теряет связь с объектом UIElement во время манипуляции и когда начинается инерция.
Событие Завершение Манипуляции Происходит при завершении манипуляций и инерции над UIElement.
ManipulationStartingRoutedEventArgs Предоставляет данные для события ManipulationStarting.
ManipulationStartedRoutedEventArgs Предоставляет данные для события ManipulationStarted.
ManipulationDeltaRoutedEventArgs Предоставляет данные для события ManipulationDelta.
АргументыСобытияНачалаИнерцииМанипуляции Предоставляет данные для события ManipulationInertiaStarting.
МанипуляцииVelocities Описывает скорость, с которой выполняются манипуляции.
ManipulationCompletedRoutedEventArgs Предоставляет данные для события «ManipulationCompleted».

Жест состоит из ряда событий манипуляции. Каждый жест начинается с события ManipulationStarted , например при касании экрана пользователем.

Затем генерируются одно или несколько событий ManipulationDelta. Например, если вы коснулись экрана, а затем перетащите пальцем по экрану. Наконец, возникает событие ManipulationCompleted при завершении взаимодействия.

Замечание

Если у вас нет сенсорного монитора, можно протестировать код события манипуляции в симуляторе с помощью интерфейса мыши и колесика мыши.

В следующем примере показано, как использовать события ManipulationDelta для обработки взаимодействия слайдов на прямоугольнике и перемещения по экрану.

Сначала в XAML создается прямоугольник с именем touchRectangle с высотой и шириной 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Затем создается глобальный TranslateTransform с именем dragTranslation, предназначенный для перемещения Rectangle. Прослушиватель событий ManipulationDelta указывается на прямоугольнике, и dragTranslation добавляется к RenderTransform этого прямоугольника.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Наконец, в обработчике событий ManipulationDelta положение Rectangle обновляется с помощью TranslateTransform на свойстве Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Маршрутизируемые события

Все события указателя, события жестов и манипуляции, упомянутые здесь, реализуются как перенаправленные события. Это означает, что событие может обрабатываться объектами, кроме объектов, которые первоначально вызвали событие. Последовательные родители в дереве объектов, такие как родительские контейнеры UIElement или корневая страница вашего приложения, могут обрабатывать эти события, даже если исходный элемент не обрабатывает их. И наоборот, любой объект, обрабатывающий событие, может пометить событие, обработанное таким образом, чтобы он больше не достиг родительского элемента. Дополнительные сведения о концепции перенаправленного события и о том, как она влияет на способ записи обработчиков для перенаправленных событий, см. в разделе "События" и обзор перенаправленных событий.

Это важно

Если нужно обрабатывать события указателя для UIElement в прокручиваемом представлении (например, ScrollViewer или ListView), необходимо явно отключить поддержку событий обработки для элемента в представлении, вызвав UIElement.CancelDirectmanipulation(). Чтобы повторно включить события обработки в представлении, вызовите UIElement.TryStartDirectManipulation().

Полезные советы

  • Проектирование приложений с сенсорным взаимодействием в качестве основного ожидаемого метода ввода.
  • Предоставьте визуальную обратную связь для всех типов взаимодействия (касание, стилус, перо, мышь и т. д.)
  • Оптимизируйте таргетинг, изменив размер области касания, геометрию контакта, пролистывание и покачивание.
  • Оптимизируйте точность с помощью контрольных точек и направляющих "направляющих полос".
  • Предоставьте подсказки и ручки, чтобы повысить точность касания для тесно расположенных элементов пользовательского интерфейса.
  • По возможности не используйте временные взаимодействия (пример подходящего использования: касание и удержание).
  • Не используйте количество пальцев, используемых для различения манипуляции всякий раз, когда это возможно.

Samples

  • Основной пример ввода
  • пример входных данных с низкой задержкой
  • Пример режима взаимодействия пользователя
  • пример визуальных элементов Focus

Архивные примеры

  • Last updated on