选择文本和图像

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

重要 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 触摸交互相似,计时交互功能仅限于通过按住手势来显示信息界面。 有关详细信息,请参阅 视觉反馈指南

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

可编辑的内容

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

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

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

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

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

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

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

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

 

不可编辑的内容

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

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

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

对象操作

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

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

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

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

带有裁剪手柄的图像

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

面向开发人员

Samples

档案样本