墨迹书写控件
有两种不同的控件可促进 Windows 应用中的墨迹书写:InkCanvas 和 InkToolbar。
InkCanvas 控件将笔输入呈现为墨迹笔划(使用颜色和粗细的默认设置)或擦除笔划。 此控件是一个透明覆盖,不包括任何用于更改默认墨迹笔划属性的内置 UI。
注意
InkCanvas 可配置为支持鼠标和触摸输入的类似功能。
由于 InkCanvas 控件不包括对更改默认墨迹笔划设置的支持,因此它可以与 InkToolbar 控件配对。 InkToolbar 包含可激活在关联 InkCanvas 中与墨迹相关的功能的一组可自定义和可扩展按钮。
默认情况下,InkToolbar 包括用于绘图、擦除、突出显示和显示标尺的按钮。 其他设置和命令(例如墨迹颜色、笔划粗细、全部擦除等)根据功能在浮出控件中提供。
注意
InkToolbar 支持笔和鼠标输入,并且可以配置为识别触摸输入。
这是正确的控件吗?
如果需要在应用中启用基本墨迹书写功能,而无需向用户提供任何墨迹设置,请使用 InkCanvas。
默认情况下,使用笔尖(粗细为 2 像素的黑色圆珠笔)时,笔划呈现为墨迹,使用橡皮擦尖时,笔划呈现为橡皮擦。 如果橡皮擦尖不存在,可以将 InkCanvas 配置为将笔尖的输入作为擦除笔划进行处理。
将 InkCanvas 与 InkToolbar 配对,以提供用于激活墨迹功能的 UI,并设置基本墨迹属性,例如笔尖的笔划大小、颜色和形状。
注意
若要在 InkCanvas 上对笔划墨迹呈现进行更广泛的自定义,请使用基础的 InkPresenter 对象。
ToolBar 工具栏概述
内置按钮
InkToolbar 包含以下内置按钮:
笔
- 圆珠笔 - 用圆笔尖绘制一个纯色、不透明的笔划。 笔划大小取决于检测到的笔压。
- 铅笔 - 使用圆笔尖绘制边缘柔软、纹理清晰和半透明的笔划(适用于分层底纹效果)。 笔画颜色(黑暗)取决于检测到的笔压。
- 荧光笔 – 使用矩形笔尖绘制半透明笔划。
可以在每个笔的浮出控件中自定义调色板和大小属性(最小值、最大值、默认值)。
工具
- 橡皮擦 – 删除触碰的任何墨迹笔划。 请注意,将删除整个墨迹笔划,而不仅仅是橡皮擦笔划下面的部分。
切换
- 标尺 – 显示或隐藏标尺。 在标尺边缘附近绘制会导致墨迹笔划与标尺对齐。
尽管这是默认配置,但你可以完全控制应用的 InkToolbar 中包含的内置按钮。
自定义按钮
InkToolbar 由两组不同的按钮类型组成:
- “工具”按钮组包含内置绘图、擦除和突出显示按钮。 此处添加了自定义笔和工具。
注意
功能选择相互排斥。
- 一组包含内置标尺按钮的“切换”按钮。 自定义切换按钮将添加到该组。
注意
功能相互不排斥,并且可以与其他活动工具同时使用。
根据应用程序和所需的墨迹书写功能,可以将以下任意按钮(与自定义墨迹功能绑定)添加到 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 控件。