墨迹书写控件

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

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

注意

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

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

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

注意

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

InkToolbar 调色板浮出控件

这是正确的控件吗?

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

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

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

注意

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

ToolBar 工具栏概述

内置按钮

InkToolbar 包含以下内置按钮:

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

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

工具

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

切换

  • 标尺 – 显示或隐藏标尺。 在标尺边缘附近绘制会导致墨迹笔划与标尺对齐。
    与 InkToolbar 关联的标尺视觉对象

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

自定义按钮

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

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

注意

功能选择相互排斥。

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

注意

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

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

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

注意

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

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

InkToolbar 交互

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

InkToolbar 字形

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

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

调用了橡皮擦浮出控件的 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
InkCanvas 用于在 Microsoft Edge 中进行墨迹书写

Windows Ink 工作区

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

创建 InkCanvas 和 InkToolbar

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

<InkCanvas x:Name="myInkCanvas"/>

注意

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

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

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

这将显示以下 InkToolbar:

基本 InkToolbar

获取示例代码

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