Управление рукописью

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

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

Замечание

InkCanvas можно настроить для поддержки аналогичных функций для ввода мыши и сенсорного ввода.

Поскольку элемент управления InkCanvas не поддерживает изменение параметров росчерка рукописного ввода по умолчанию, его можно использовать в сочетании с элементом управления InkToolbar. Панель InkToolbar содержит настраиваемую и расширяемую коллекцию кнопок, которые активируют функции, связанные с рукописным вводом, в связанном InkCanvas.

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

Замечание

InkToolbar поддерживает ввод пера и мыши и может быть настроен для распознавания сенсорных входных данных.

Это правильный контроль?

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

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

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

Замечание

Для более детальной настройки отрисовки штрихов пера с помощью элемента управления InkCanvas используйте объект InkPresenter.

Обзор панели инструментов рукописного ввода

Встроенные кнопки

Панель InkToolbar включает следующие встроенные кнопки:

Перья

• Шариковая ручка — рисует сплошной, непрозрачный штрих круглым наконечником. Размер штриха зависит от обнаруженного давления пера.
• Карандаш — рисует мягкие края, текстурированную и полупрозрачную линию (полезную для эффекта слоёного штриховки) с круглым наконечником пера. Цвет штриха (темнота) зависит от обнаруженного давления пера.
• Выделитель — рисует полупрозрачный штрих прямоугольным наконечником пера.

Вы можете настроить цветовую палитру и атрибуты размера (min, max, default) во всплывающем элементе для каждого пера.

инструмент

• Ластик — удаляет любой штрих рукописного ввода, к которому прикоснется. Обратите внимание, что весь чернильный штрих стирается, а не только часть под штрихом ластика.

Переключатель

• Линейка — показывает или скрывает линейку. Рисование рядом с краем линейки приводит к привязке штриха к линейке.
  

Хотя это конфигурация по умолчанию, у вас есть полный контроль над встроенными кнопками, включенными в панель InkToolbar для вашего приложения.

Пользовательские кнопки

Панель InkToolbar состоит из двух отдельных групп типов кнопок:

1. Группа кнопок "инструменты", содержащая встроенные кнопки для рисования, стирания и выделения. Здесь добавлены пользовательские ручки и инструменты.

Замечание

Выбор компонентов является взаимоисключающим.

2. Группа кнопок "переключения", содержащая встроенную кнопку линейки. Здесь добавляются пользовательские переключатели.

Замечание

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

В зависимости от приложения и необходимых функций рукописного ввода можно добавить любую из следующих кнопок (привязанных к пользовательским функциям рукописного ввода) на панель InkToolbar:

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

Замечание

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

Элемент управления InkToolbar может быть элементом верхнего уровня, но как правило он доступен через кнопку или команду «Рукописный ввод». Рекомендуется использовать глиф EE56 из шрифта Segoe MLD2 Assets в качестве значка верхнего уровня.

Взаимодействие с inkToolbar

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

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

У ластика также есть всплывающее меню, которое предоставляет команду «Удалить все чернила».

Дополнительные сведения о настройке и расширяемости см. в примере SimpleInk.

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

• InkCanvas и рукописный ввод в целом лучше всего использовать с активным пером. Однако рекомендуется поддерживать рукописный ввод с помощью мыши и сенсорного экрана (включая пассивное перо), если это необходимо для вашего приложения.
• Используйте элемент управления InkToolbar с InkCanvas для предоставления основных функций и параметров рукописного ввода. И InkCanvas, и InkToolbar можно программно настроить.
• InkToolbar и рукописный ввод в целом лучше всего использовать с активным пером. Однако рукописный ввод с помощью мыши и сенсорного ввода может поддерживаться при необходимости в приложении.
• Если реализуется поддержка рукописного текста с помощью касаний, рекомендуется использовать значок ED5F из шрифта Segoe MLD2 Assets для кнопки переключения, с подсказкой "Ввод рукописного текста при касании".
• Если вы предоставляете возможность выбора линий, рекомендуется использовать значок "EF20" из шрифта Segoe MLD2 Assets для кнопки инструмента и подсказку "Инструмент выбора".
• При использовании нескольких InkCanvas рекомендуется использовать один элемент управления InkToolbar для управления рукописным вводом на холстах.
• Для повышения производительности рекомендуется изменить стандартное всплывающее меню, вместо создания настраиваемого, как для стандартных, так и для настраиваемых средств.

Примеры

Microsoft Edge

Microsoft Edge использует inkCanvas и InkToolbar для Web Notes.

Windows Ink Workspace

InkCanvas и InkToolbar также используются для Snip & Sketch в рабочей области Windows Ink Workspace.

Создайте InkCanvas и InkToolbar

Для добавления InkCanvas в приложение требуется только одна строка разметки:

<InkCanvas x:Name="myInkCanvas"/>

Замечание

Для получения подробной информации о кастомизации InkCanvas с помощью InkPresenter, см. статью "Взаимодействие с пером и Windows Ink в приложениях Windows".

Элемент управления InkToolbar должен использоваться вместе с InkCanvas. Для включения inkToolbar (со всеми встроенными инструментами) в приложение требуется одна дополнительная строка разметки:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Откроется следующая панель InkToolbar:

Получите пример кода

• пример SimpleInk — демонстрирует 8 сценариев настройки и расширяемости элементов управления InkCanvas и InkToolbar. Каждый сценарий содержит основные рекомендации по общим ситуациям обработки рукописного ввода и реализации элементов управления.
• пример ComplexInk — демонстрирует более сложные сценарии рукописного ввода.
• Пример коллекции WinUI для UWP — просмотрите все элементы управления XAML в интерактивном формате.

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

• Взаимодействие пера и Windows Ink в приложениях Windows.
• Распознавание штрихов Windows Ink как текста и форм
• Хранение и извлечение данных Windows Ink росчерков