Взаимодействия с помощью сенсорного ввода

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

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

Важные API-интерфейсы: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

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

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

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

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

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

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

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

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

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

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

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

Сравнение требований, предъявляемых к взаимодействию с сенсорным экраном

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

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

Для мыши, пера и клавиатуры существуют три состояния: верхнее (неактивное), нижнее (активное) и при наведении (фокусное).

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

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

Примечание

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

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

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

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

Целевая настройка

Для оптимизации нацеливания используются:

  • Размеры целей касания

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

  • Форма области контакта

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

  • Проведение

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

  • Качание

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

Точность

Для проектирования обработки небрежных касаний используются:

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

Загораживание

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

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

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

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

  • Подсказки

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

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

  • Маркеры для точности

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

Временные свойства

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

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

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

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

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

  • Манипуляции не следует различать по количеству используемых пальцев.

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

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

    Примечание

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

  • Подходящие описания и визуальные подсказки очень эффективны при использовании расширенных взаимодействий.

Представления приложения

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

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

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

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

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

Настраиваемые сенсорные взаимодействия

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

Важно!

Windows 11 и более новых версий

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

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

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

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

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

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

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

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

  • Статические события жестов срабатывают по завершении взаимодействия. События жестов включают в себя Tapped, DoubleTapped, RightTapped и Holding.

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

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

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

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

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

Вот основной набор мультисенсорных жестов, поддерживаемых UWP.

Имя Тип Описание
Касание Статический жест Пользователь касается экрана одним пальцем, затем отводит палец.
Нажатие и удерживание Статический жест Пользователь прикасается к экрану одним пальцем и оставляет палец на месте.
Slide (Слайд) Жест манипуляции Пользователь прикасается к экрану одним или несколькими пальцами и двигает их в одном направлении.
Swipe Жест манипуляции Пользователь прикасается к экрану одним или несколькими пальцами и перемещает их на короткое расстояние в одном направлении.
Вращение Жест манипуляции Пользователь прикасается к экрану двумя или несколькими пальцами и двигает их по дуге в направлении по часовой стрелке или против нее.
Сжатие Жест манипуляции Пользователь прикасается к экрану двумя или более пальцами и сдвигает их.
Stretch Жест манипуляции Пользователь прикасается к экрану двумя или более пальцами и раздвигает их.

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

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

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

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

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

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

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

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

Сначала в XAML создается объект Rectangle с именем touchRectangle.

<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 увеличивает параметры Height и Width объекта Rectangle, в то время, как обработчики событий PointerReleased и PointerExited возвращают параметры Height и Width к начальным значениям.

// 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

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

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

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

Примечание

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

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

Событие или класс Описание
Событие ManipulationStarting Происходит при первоначальном создании процессора манипулирования.
Событие ManipulationStarted Происходит, когда устройство ввода начинает манипуляцию над UIElement.
Событие ManipulationDelta Происходит, когда устройство ввода меняет положение в процессе манипуляции.
Событие ManipulationInertiaStarting Происходит, если во время манипуляции устройство ввода теряет контакт с объектом UIElement и начинает действовать инерция.
Событие ManipulationCompleted Происходит, когда манипуляция и движение по инерции для UIElement завершены.
ManipulationStartingRoutedEventArgs Предоставляет данные для события ManipulationStarting.
ManipulationStartedRoutedEventArgs Предоставляет данные для события ManipulationStarted.
ManipulationDeltaRoutedEventArgs Предоставляет данные для события ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Предоставляет данные для события ManipulationInertiaStarting.
ManipulationVelocities Описывает скорость, с которой происходят манипуляции.
ManipulationCompletedRoutedEventArgs Предоставляет данные для события ManipulationCompleted.

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

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

Примечание

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

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

Сначала в XAML создается объект Rectangle с именем touchRectangle, свойства Height и Width которого имеют значение 200.

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

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

// 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 или корень Page вашего приложения, могут обрабатывать эти события, даже если исходный элемент этого не делает. И наоборот, любой объект, который обрабатывает событие, может пометить событие как обработанное, чтобы оно не обращалось к родительским элементам. Подробнее о концепции маршрутизированных событий и их влиянии на метод написания обработчиков для перенаправленных событий см. в разделе Общие сведения о событиях и перенаправленных событиях.

Важно!

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

Dos и не хочешь

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

Примеры

Примеры архивов