Язык: HTML | XAML

Реакция на ввод с сенсорной панели

Applies to Windows only

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

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

Совет  Информация в этом разделе относится к разработке приложений Магазина Windows на C++, C# или Visual Basic.

О разработке приложений Магазина Windows на JavaScript можно узнать из раздела Реакция на сенсорные взаимодействия (HTML).

Предварительные требования:  Если вы начинающий разработчик приложений Магазина Windows на C++, C# или Visual Basic, изучите следующие разделы, чтобы получить представление об описываемых здесь технологиях.

Создание первого приложения Магазина Windows на C# или Visual Basic

Создание первого приложения Магазина Windows на C++

Схема создания приложений среды выполнения Windows на C# или Visual Basic

Схема создания приложений Магазина Windows на C++

Дополнительные сведения о событиях см. в разделе Общие сведения о событиях и перенаправленных событиях.

Компоненты приложения от начала до конца:  Дополнительные сведения об этой функциональности см. в нашей серии Компоненты приложения от начала до конца.

Взаимодействие с пользователем от А до Я (XAML)

Настройка взаимодействия с пользователем от А до Я (XAML)

Рекомендации по взаимодействию с пользователем:  

Библиотеки элементов управления платформы (HTML и XAML) предоставляют все механизмы взаимодействия с пользователем, используемые в Windows, в том числе стандартные взаимодействия, анимированные физические эффекты и визуальную обратную связь. Если вы не планируете настраивать механизмы поддержки взаимодействий, используйте стандартные элементы управления.

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

Примеры:  Примеры использования этой функциональности см. в коллекции примеров приложений Магазина Windows.

Ввод: пример жестов в Windows 8

Ввод: пример событий пользовательского ввода на XAML

Пример прокрутки, сдвига и масштабирования на XAML

Общие сведения

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

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

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

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

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

Язык сенсорной панели Windows 8.1

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

ТерминОписание

Обучение при наведении

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

Касание одним пальцем — основное действие

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

Касание двумя пальцами — щелчок правой кнопкой мыши

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

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

Проведение двумя пальцами — сдвиг

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

Сжатие и растяжение — изменение масштаба

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

Нажатие и проведение одним пальцем — изменение порядка

Перетаскивание элемента.

Нажатие и проведение одним пальцем — выделение текста

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

Края для системных команд

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

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

Зоны щелчка левой и правой кнопками мыши

Вы можете эмулировать функции левой и правой кнопок мыши.

 

Оборудование

Запросите возможности мыши (MouseCapabilities), чтобы определить, к каким аспектам пользовательского интерфейса вашего приложения у аппаратной части сенсорной панели есть прямой доступ. Мы рекомендуем предоставлять пользовательский интерфейс как для сенсорного ввода, так и для мыши.

Дополнительные сведения о запросе возможностей устройств см. в разделе Краткое руководство: распознавание устройств указания.

Визуальная обратная связь

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

Дополнительные общие рекомендации по визуальной обратной связи см. в разделе Руководство по визуальной обратной связи.

Курсоры

Для указателя сенсорной панели предусмотрен набор стандартных указателей. Они указывают на основное действие элемента.

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

Если требуется настроить курсор мыши:

  • Обязательно используйте курсор-стрелку (Курсор-стрелка) для элементов, реагирующих на щелчок. Не используйте курсор в виде руки (Курсор в виде руки) для ссылок и других интерактивных элементов. Вместо него применяйте эффекты наведения (описанные выше).
  • Используйте текстовый курсор (Текстовый курсор) для текста, доступного для выделения.
  • Используйте курсор перемещения (Курсор перемещения), когда основным действием является перемещение (перетаскивание или обрезка). Не используйте курсор перемещения для элементов, у которых основное действие — навигация (например, плитки начального экрана).
  • Используйте курсоры изменения размеров по горизонтали, вертикали и диагонали (Курсор изменения размеров по вертикали, Курсор изменения размеров по горизонтали, Курсор изменения размеров по диагонали (левый нижний, правый верхний), Курсор изменения размеров по диагонали (левый верхний, правый нижний)), если размер объекта можно изменить.
  • Используйте курсоры "хватающая рука" (Курсор “хватающая рука” (разжатая), Курсор “хватающая рука” (сжатая)) для сдвига содержимого в пределах фиксированного полотна, например карты.

Связанные разделы

Понятия
Реакция на взаимодействие с пользователем

 

 

Показ:
© 2014 Microsoft