Текстовые элементы управления

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

  • Для отображения текста, доступного только для чтения, применяются элементы управления TextBlock и RichTextBlock.
  • Элементы управления для ввода текста и редактирования: TextBox, RichEditBox, AutoSuggestBox и PasswordBox.

Важные API: класс TextBlock, класс RichTextBlock, класс TextBox, класс RichEditBox, класс AutoSuggestBox, класс PasswordBox

Выбор правильного элемента управления

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

Отрисовка текста, доступного только для чтения

Для отображения в приложении текста «только для чтения», как правило, используется TextBlock. Его можно использовать для отображения однострочного или многострочного текста, строковых гиперссылок и текста с полужирным шрифтом, курсивом или подчеркиванием.

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

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

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

Свойство содержимого RichTextBlock представляет собой свойство Blocks, которое поддерживает текст на основе абзаца с помощью элемента Paragraph. У него нет свойства Text, которое можно использовать для удобного доступа к текстовому содержимому элементов управления в приложении.

через текстовый ввод;

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

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

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

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

Следует также использовать элемент управления AutoSuggestBox для реализации поля поиска.

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

Является ли ввод текста оптимальным вариантом?

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

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

Примеры

Коллекция WinUI 2
WinUI Gallery

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

Текстовое поле

A text box

Поле автозаполнения

Example of the expanded auto-suggest control

Поле ввода пароля

Password box focus state typing text

Создание элемента управления текстом

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

Инструкции по использованию шрифтов и стиля

Инструкции по использованию шрифтов и стиля см. в этих статьях:

Ввод с помощью пера

Применимо к: TextBox, RichEditBox, AutoSuggestBox

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

Text box expands when tapped with pen

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

Выбор подходящей клавиатуры для элемента управления текстом

Применимо к: TextBox, PasswordBox RichEditBox

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

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

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

Например, если текстовое поле используется только для ввода 4-значного PIN-кода, установите для свойства InputScope значение Number. Это сообщает системе, что нужно отобразить раскладку цифровой клавиатуры, благодаря чему пользователю проще вводить PIN-код.

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

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

Шрифты цвета

Применимо к: TextBlock, RichTextBlock, TextBox, RichEditBox

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

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

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

Передаваемый текст выглядит следующим образом:

Text block with color font

Подробные сведения см. в свойстве IsColorFontEnabled.

Инструкции по разделителям строк и абзацев

Применимо к: TextBlock, RichTextBlock, многострочному TextBox, RichEditBox

Используйте символ знак разделителя в виде линии (0x2028) и символ разделения абзацев (0x2029) для разделения обычного текста. Новая строка начинается после каждого разделителя в виде линии. Новый абзац начинается после каждого разделителя абзаца.

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

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

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

Руководство по проверке орфографии

Применимо к: TextBox, RichEditBox

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

Вот пример встроенной проверки правописания.

the built-in spell checker

Используйте проверку правописания в элементах управления текстового ввода для двух целей:

  • Автоматическое исправление ошибок

    Модуль проверки правописания автоматически исправляет неправильно написанные слова, если он уверен в том, что допущена ошибка. Например, он автоматически исправляет "дял" на "для".

  • Отображение вариантов написания

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

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

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

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

Для элементов управления TextBox и RichEditBox проверка орфографии включена по умолчанию. Ее можно выключить, задав для свойства IsSpellCheckEnabled значение false.

Проектировщикам

Разработчикам (XAML)