Выделение текста и изображений

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

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

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

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

  • круглая форма;
  • видимость на любом фоне;
  • согласованный размер.

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

  

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

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

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

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

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

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

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

Выделение текста

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

Редактируемое и нередактируемое содержимое

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

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

Редактируемое содержимое

Касание левой части слова помещает курсор непосредственно слева от слова, а касание правой части — непосредственно справа от слова.

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

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

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

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

 

Нередактируемое содержимое

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

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

Манипулирование объектами

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

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

Проигрыватель мультимедиа с настраиваемым индикатором выполнения.

Редактор изображений с захватами обрезки.

Похожие статьи

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

• Настраиваемые взаимодействия с пользователем

Примеры

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

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

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

• Ввод: пример возможностей устройства

• Ввод: пример тестирования сенсорного ввода

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

• Ввод: пример упрощенного рукописного ввода

• Входные данные: пример манипуляций и жестов

• Пример сенсорного ввода в DirectX