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

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

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

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

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

  • Циклическая фигура
  • Видимый на любом фоне
  • Согласованный размер

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

  

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

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

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

Выделение и манипуляция текстом особенно подвержены трудностям в пользовательском опыте, вызванным сенсорными взаимодействиями. Мышь, перо/стилус и ввод с клавиатуры очень точный: щелчок мыши или контакт пера/стилуса обычно сопоставляются с одним пикселем, а клавиша нажимается или не нажимается. Сенсорный ввод не обеспечивает точности; трудно сопоставить всю поверхность кончика пальца с определенными координатами x-y на экране, чтобы точно разместить текстовый курсор.

Соображения и рекомендации

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

Манипуляция с объектами

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

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

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

Редактор изображений с инструментами для обрезки.

Связанные статьи

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

• Пользовательские взаимодействия

Samples

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

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

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

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

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

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

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

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

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