选择文本和图像

本文介绍如何选择和操作文本、图像和控件,并提供在应用中使用这些机制时应考虑的用户体验指南。

重要 APIWindows.UI.Xaml.InputWindows.UI.Input

准则

  • 实现自己的控制手柄 UI 时,请使用字体字形。 手柄是两种 Segoe UI 字体的组合,这些字体可用于系统范围。 使用字体资源可简化不同 dpi 的呈现问题,并且适用于各种 UI 缩放高原。 实现自己的控制手柄时,它们应共享以下 UI 特征:

    • 圆形
    • 在任何背景上可见
    • 一致大小
  • 提供可选择内容周围的边距以容纳控制手柄 UI。 如果你的应用在不平移/滚动的区域中启用文本选择,则允许文本区域左侧和右侧的 1/2 手柄边距和文本区域的顶部和底部的 1 个手柄高度(如下图所示)。 这可确保整个控制手柄 UI 向用户公开,并最大程度地减少与其他基于边缘的 UI 的意外交互。

    文本选择手柄边距

  • 在交互期间隐藏控制手柄 UI。 消除交互过程中控制手柄的遮挡。 当手柄没有完全被手指遮盖或有多个文本选择手柄时,这非常有用。 这消除了显示子窗口时的视觉项目。

  • 不允许选择 UI 元素,如控件、标签、图像、专有内容等。 通常,Windows 应用程序仅允许在特定控件中进行选择。 按钮、标签和徽标等控件不可选择。 评估选择是否是应用的问题,如果是,请确定应禁止选择的 UI 区域。

其他使用指南

文本选择和操作尤其容易受到触摸交互引入的用户体验挑战。 鼠标、笔/触笔和键盘输入高度精细:鼠标单击或笔/触笔接触通常映射到单个像素,并且按下或未按下键。 触摸输入不精细;很难将指尖的整个图面映射到屏幕上的特定 x-y 位置,以准确放置文本插入点。

注意事项和建议

使用通过 Windows 中的语言框架公开的内置控件来生成提供完整平台用户交互体验的应用,包括选择和操作行为。 你会发现对于大多数 Windows 应用来说,内置控件的交互功能就已足够。

使用标准 Windows 文本控件时,本主题中所述的选择行为和视觉对象不能自定义。

文本选择

如果你的应用需要支持文本选择的自定义 UI,我们建议你遵循此处所述的 Windows 选择行为。

可编辑和不可编辑的内容

通过触摸,选择交互主要通过手势执行,例如点击以设置插入光标或选择单词,以及用于修改所选内容的幻灯片。 与其他 Windows 触摸交互一样,计时交互仅限于按住手势以显示信息性 UI。 有关详细信息,请参阅 视觉反馈指南。

Windows 可识别选择交互、可编辑和非可编辑的两种可能状态,并相应地调整选择 UI、反馈和功能。

可编辑的内容

在单词的左半部分点击会将光标置于单词的右侧,同时点击右半部分会将光标置于单词右侧。

下图演示了如何通过在单词的开头或结尾附近点击来放置带有控制手柄的初始插入光标。

点击(或按住)一个单词的左侧,将插入点和手柄放在该单词的开头。点击(或按住)单词的右侧,将插入点和手柄放在该单词的末尾。

下图演示了如何通过拖动手柄来调整所选内容。

将手柄拖动到任一方向以调整选择(第一个控制手柄保持锁定状态,并显示第二个控制手柄)。拖动任一手柄进行后续调整。

下图演示了如何通过点击所选内容或控制手柄(还可以使用按下和按住)来调用上下文菜单。

点击(或按住)在所选内容或控制手柄上调用上下文菜单。

请注意 ,在拼写错误的单词时,这些交互会有所不同。 点击标记为拼写错误的单词将突出显示整个单词并调用建议的拼写上下文菜单。

 

不可编辑的内容

下图演示了如何通过点击单词(初始选定内容中不包含空格)来选择单词。

在单词内点击以选择它(初始选择中不包含空格)。

按照与可编辑文本相同的过程调整所选内容并显示上下文菜单。

对象操作

在 Windows 应用中实现自定义对象操作时,尽可能使用相同(或相似)的控制手柄来选择文本。 这有助于跨平台提供一致的交互体验。

例如,控制手柄还可用于支持调整大小和裁剪的图像处理应用或提供可调整进度栏的媒体播放器应用,如下图所示。

具有进度控制器的媒体播放器

具有可调整进度栏的媒体播放器。

带有裁剪手柄的图像

带有裁剪手柄的图像编辑器。

面向开发人员

示例

存档示例