Рекомендации по визуальному отзыву

  • Статья

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

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

Рекомендации

  • Попробуйте ограничить изменения шаблона элемента управления непосредственно связанными с вашим намерением разработки, так как обширные изменения могут повлиять на производительность и специальные возможности как элемента управления, так и приложения.
    • Дополнительные сведения о настройке свойств элемента управления, включая свойства визуального состояния, см. в стилях XAML.
    • Дополнительные сведения о внесении изменений в шаблон элемента управления см. в классе UserControl
    • Попробуйте создать собственный пользовательский шаблонный элемент управления, если необходимо внести значительные изменения в шаблон элемента управления. Пример пользовательского шаблона элемента управления см. в примере пользовательского элемента управления "Изменить".
  • Не используйте визуализации сенсорного ввода в ситуациях, когда они могут препятствовать использованию приложения. Дополнительные сведения см. в разделе ShowGestureFeedback.
  • Не отображайте отзывы, если это абсолютно необходимо. Оставьте пользовательский интерфейс чистым и не загроможденным, не отображая визуальные отзывы, если вы не добавляете значение, которое недоступно в другом месте.
  • Старайтесь не резко настраивать поведение визуальных отзывов встроенных жестов Windows, так как это может создать несогласованное и запутанное взаимодействие с пользователем.

Дополнительные рекомендации по использованию

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

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

Внимание

Мы не рекомендуем изменять поведение взаимодействия встроенных жестов.

Отзывы на разных устройствах

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

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

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

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

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

Визуальные элементы с фокусом высокой видимости

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

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

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

Свойства границы

Существует две части визуальных элементов фокуса высокой видимости: основная граница и вторичная граница. Основная рамка толщиной 2 пикселя проходит вдоль внешней стороны дополнительной рамки. Дополнительная рамка толщиной 1 пиксель проходит вдоль внутренней стороны основной рамки. Визуальные линии с фокусом высокой видимости

Чтобы изменить толщину типа границы (основной или вторичной), используйте FocusVisualPrimaryThickness или FocusVisualSecondaryThickness соответственно:

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

Толщины визуального поля фокуса высокой видимости

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

Поле — это пространство между визуальными границами элемента управления и началом вторичной границы визуальных элементов фокуса. Поле по умолчанию — 1px от границ элемента управления. Вы можете изменить это поле на основе каждого элемента управления, изменив свойство FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Различия между визуальными полями фокуса высокой видимости

Отрицательное поле будет толкать границу от центра элемента управления, и положительное поле будет перемещать границу ближе к центру элемента управления.

Чтобы отключить визуальные элементы фокуса на элементе управления полностью, просто отключите UseSystemFocusVisuals:

<Slider Width="200" UseSystemFocusVisuals="False"/>

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

Свойства цвета

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

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

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Изменение цвета визуального элемента фокуса высокой видимости

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

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Для конструкторов

Для разработчиков

Примеры

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