墨迹书写控件

有两种不同的控件可促进 Windows 应用中的墨迹书写：InkCanvas 和 InkToolbar。

InkCanvas 控件将笔输入呈现为墨迹笔划（使用颜色和粗细的默认设置）或擦除笔划。 此控件是一个透明覆盖，不包括任何用于更改默认墨迹笔划属性的内置 UI。

注意

InkCanvas 可配置为支持鼠标和触摸输入的类似功能。

由于 InkCanvas 控件不包括对更改默认墨迹笔划设置的支持，因此它可以与 InkToolbar 控件配对。 InkToolbar 包含可激活在关联 InkCanvas 中与墨迹相关的功能的一组可自定义和可扩展按钮。

默认情况下，InkToolbar 包括用于绘图、擦除、突出显示和显示标尺的按钮。 其他设置和命令（例如墨迹颜色、笔划粗细、全部擦除等）根据功能在浮出控件中提供。

注意

InkToolbar 支持笔和鼠标输入，并且可以配置为识别触摸输入。

这是正确的控件吗？

如果需要在应用中启用基本墨迹书写功能，而无需向用户提供任何墨迹设置，请使用 InkCanvas。

默认情况下，使用笔尖（粗细为 2 像素的黑色圆珠笔）时，笔划呈现为墨迹，使用橡皮擦尖时，笔划呈现为橡皮擦。 如果橡皮擦尖不存在，可以将 InkCanvas 配置为将笔尖的输入作为擦除笔划进行处理。

将 InkCanvas 与 InkToolbar 配对，以提供用于激活墨迹功能的 UI，并设置基本墨迹属性，例如笔尖的笔划大小、颜色和形状。

注意

若要在 InkCanvas 上对笔划墨迹呈现进行更广泛的自定义，请使用基础的 InkPresenter 对象。

ToolBar 工具栏概述

内置按钮

InkToolbar 包含以下内置按钮：

笔

• 圆珠笔 - 用圆笔尖绘制一个纯色、不透明的笔划。 笔划大小取决于检测到的笔压。
• 铅笔 - 使用圆笔尖绘制边缘柔软、纹理清晰和半透明的笔划（适用于分层底纹效果）。 笔画颜色（黑暗）取决于检测到的笔压。
• 荧光笔 – 使用矩形笔尖绘制半透明笔划。

可以在每个笔的浮出控件中自定义调色板和大小属性（最小值、最大值、默认值）。

工具

• 橡皮擦 – 删除触碰的任何墨迹笔划。 请注意，将删除整个墨迹笔划，而不仅仅是橡皮擦笔划下面的部分。

切换

• 标尺 – 显示或隐藏标尺。 在标尺边缘附近绘制会导致墨迹笔划与标尺对齐。
  

尽管这是默认配置，但你可以完全控制应用的 InkToolbar 中包含的内置按钮。

自定义按钮

InkToolbar 由两组不同的按钮类型组成：

1. “工具”按钮组包含内置绘图、擦除和突出显示按钮。 此处添加了自定义笔和工具。

注意

功能选择相互排斥。

2. 一组包含内置标尺按钮的“切换”按钮。 自定义切换按钮将添加到该组。

注意

功能相互不排斥，并且可以与其他活动工具同时使用。

根据应用程序和所需的墨迹书写功能，可以将以下任意按钮（与自定义墨迹功能绑定）添加到 InkToolbar：

• 自定义笔 - 由主机定义其墨迹调色板和笔尖属性（如形状、旋转和大小）的笔。
• 自定义工具 - 由主机应用定义的非笔工具。
• 自定义切换 - 将应用定义功能的状态设置为打开或关闭。 启用后，该功能可与活动工具结合使用。

注意

你无法更改内置按钮的显示顺序。 默认显示顺序为：圆珠笔、铅笔、荧光笔、橡皮擦和标尺。 自定义笔将追加到最后一个默认笔，在最后一个笔按钮和橡皮擦按钮之间添加自定义工具按钮，并在标尺按钮后添加自定义切换按钮。 （自定义按钮按指定的顺序添加。）

尽管 InkToolbar 可以是最高级别项目，但它通常通过“墨迹书写”按钮或命令公开。 建议将 Segoe MLD2 Assets 字体中的 EE56 字形用作顶级图标。

InkToolbar 交互

所有内置笔和工具按钮都包含一个浮出控件菜单，可在其中设置墨迹属性以及笔尖形状和大小。 一种“扩展字形”显示在按钮上，以指示存在浮出控件。

再次选择活动工具的按钮时，将显示浮出控件。 更改颜色或大小时，将自动关闭浮出控件并恢复墨迹书写。 自定义笔和工具可以使用默认浮出控件或指定自定义浮出控件。

橡皮擦还有一个浮出控件，它提供擦除所有墨迹命令。

有关自定义和扩展性的信息，请查看SimpleInk 示例。

建议

• InkCanvas 和墨迹书写通常在使用活动笔时体验最好。 但是，如果应用需要，我们建议支持使用鼠标和触碰（包括被动笔）输入进行墨迹书写。
• 将 InkToolbar 控件与 InkCanvas 配合使用，以提供基本的墨迹书写功能和设置。 可以编程方式自定义 InkCanvas 和 InkToolbar。
• 活动笔能为 InkToolbar 和整体墨迹书写带来最好的体验。 但是，如果应用需要，则可以支持使用鼠标和触碰进行墨迹书写。
• 如果支持使用触控输入的墨迹书写，我们建议为切换按钮使用“Segoe MLD2 Assets”中的“ED5F”图标，并附带“触摸写入”工具提示。
• 如果提供笔划选择，我们建议为工具按钮使用“Segoe MLD2 Assets”字体中的“EF20”图标，并附带“选择”工具提示。
• 如果使用多个 InkCanvas，建议使用单个 InkToolbar 控制画布上的墨迹书写。
• 为了获得最佳性能，我们建议更改默认浮出控件，而不是为默认和自定义工具创建自定义浮出控件。

示例

Microsoft Edge

Microsoft Edge 针对“Web 笔记”使用 InkCanvas 和 InkToolbar。

Windows Ink 工作区

InkCanvas 和 InkToolbar 还用于 Windows Ink 工作区中的“截图和草图”。

创建 InkCanvas 和 InkToolbar

• UWP API：InkCanvas 类、InkToolbar 类、InkPresenter 类、Windows.UI.Input.Inking
• 打开 WinUI 3 库应用并查看操作中的 InkingControls。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

将 InkCanvas 添加到应用只需一行标记：

<InkCanvas x:Name="myInkCanvas"/>

注意

有关使用 InkPresenter 进行的详细的 InkCanvas 自定义，请参阅“Windows 应用中的笔交互和 Windows Ink”一文。

InkToolbar 控件必须与 InkCanvas 结合使用。 将 InkToolbar（包含所有内置工具）合并到应用中需要一行额外的标记：

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

这将显示以下 InkToolbar：

获取示例代码

• SimpleInk 示例 - 演示关于 InkCanvas 和 InkToolbar 控件的自定义和扩展性功能的 8 个方案。 每个方案都提供有关常见墨迹书写情况和控制实现的基本指南。
• ComplexInk 示例 - 演示更高级的墨迹书写方案。
• WinUI 2 库示例 - 以交互式格式查看所有 XAML 控件。

相关文章

• Windows 应用中的笔交互和 Windows Ink
• 将 Windows Ink 笔划识别为文本和形状
• 存储和检索 Windows Ink 墨迹数据