Visual Studio 的公共控件模式

公用控件

常见控件构成了 Visual Studio 中的大多数用户界面。 Visual Studio 界面中使用的最常见控件应遵循 Windows 桌面交互准则。 本主题特定于 Visual Studio，涵盖增强这些 Windows 指南的特殊情况或详细信息。

本主题中的常见控件

• 滚动条

• 输入字段

• 组合框和下拉列表

• 复选框

• 单选按钮

• 组帧

• 文本控件

• 按钮和超链接

• 树视图

视觉样式

设置控件样式时要考虑的第一件事是控件是否将在主题 UI 中使用。 标准 UI 中的控件是非主题 UI，必须遵循 正常的 Windows 桌面样式，这意味着它们不会重新模板化，并且应显示在默认控件外观中。

• 标准（实用工具）对话框： 未显示主题。 不要重新模板。 使用基本控件样式默认值。

• 工具窗口、文档编辑器、设计图面和主题对话框： 使用颜色服务使用专用主题外观。

滚动栏

滚动条应遵循 Windows 滚动条 的常见交互模式，除非它们使用内容信息进行扩充，如代码编辑器中所示。

输入字段

对于典型的交互行为，请遵循 文本框的 Windows 桌面指南。

视觉样式

• 不应在实用工具对话框中设置输入字段的样式。 使用控件的基本样式内部函数。

• 主题输入字段只能在主题对话框和工具窗口中使用。

专用交互

• 只读字段将具有灰色（已禁用）背景，但默认（活动）前景。

• 必填字段应具有 <“必需> ”作为水印。 除非在极少数情况下，否则不应更改背景的颜色。

• 错误验证：请参阅 Visual Studio 的通知和进度

• 应调整输入字段的大小以适应内容，而不适合显示内容的窗口的宽度，也不应任意匹配长字段的长度，如路径。 长度可能是用户对字段中允许的字符数的限制的指示。

  
  输入字段长度不正确：名称不太可能这么长。

  
  正确的输入字段长度：输入字段是预期内容的合理宽度。

组合框和下拉列表

对于典型的交互行为，请遵循 适用于下拉列表和组合框的 Windows 桌面指南。

视觉样式

• 在实用工具对话框中，不要重新模板化控件。 使用控件的基本样式内部函数。

• 在主题 UI 中，组合框和下拉列表遵循控件的标准主题。

Layout

组合框和下拉列表的大小应调整为适合内容，而不适合显示内容的窗口宽度，也不应任意匹配长字段的长度，如路径。

不正确：下拉宽度对于要显示的内容太长。

正确：下拉大小允许翻译增长，但不会过长。

复选框

对于典型的交互行为，请遵循适用于检查框的 Windows 桌面指南。

视觉样式

• 在实用工具对话框中，不要重新模板化控件。 使用控件的基本样式内部函数。

• 在主题 UI 中，检查框遵循控件的标准主题。

专用交互

• 与检查框交互绝不必须弹出对话框或导航到另一个区域。

• 将检查框与第一行文本的基线对齐。

  
  不正确：检查框以文本为中心。

  
  正确：检查框与文本的第一行对齐。

单选按钮

对于典型的交互行为，请遵循 单选按钮的 Windows 桌面指南。

视觉样式

在实用工具对话框中，不要设置单选按钮的样式。 使用控件的基本样式内部函数。

专用交互

除非需要在紧密布局中维护组区别，否则不需要使用组框架来封闭无线电选择。

组帧

对于典型的交互行为，请遵循 组帧的 Windows 桌面指南。

视觉样式

在实用工具对话框中，不要设置组框架的样式。 使用控件的基本样式内部函数。

Layout

• 除非需要在紧密布局中维护组区别，否则不需要使用组框架来封闭无线电选择。

• 从不对单个控件使用组帧。

• 有时可以使用水平规则而不是组框架容器。

文本控件

静态文本字段

静态文本字段提供只读信息，用户无法选择。 避免将它用于用户可能想要复制到剪贴板的任何文本。 但是，只读静态文本可以更改以反映状态更改。 在下面的示例中，信息组下的“输出名称”静态文本将更改，以反映对上面根命名空间文本框所做的任何更改。

可通过两种方式显示静态文本信息。

当没有分组冲突时，静态文本可以位于对话框中，没有任何包含。 确定框的额外行是否确实是必需的。 例如，在组行创建的节下显示目录路径，如下所示：

文本控件中的静态文本信息

在存在其他分组区域并包含信息的对话框中，当一个节可以隐藏或显示（如在属性窗口说明窗格中），或者你想要与类似的 UI 保持一致时，请将静态文本放在框中。 此组框应为单个规则，并带有以下颜色 ButtonShadow：

属性窗口中的静态文本

只读文本框

这样，用户就可以在字段中选择文本，但不能对其进行编辑。 这些文本框与通常的三维插孔边框，填充 ButtonShadow 。

当用户更改关联的控件（如检查/取消检查检查框或选择/取消选择单选按钮时，文本框可能会变为活动状态（可编辑）。 例如，在如下所示的“工具>选项”页中，当“使用默认检查”框未激活时，主页文本框将变为活动状态检查。

只读文本框，显示非活动状态和活动状态

在对话框中使用文本

对话框中文本的关键准则：

• 无符号对话框中文本框、列表框和框架的标签以谓词开头，仅对第一个单词具有初始大写，以冒号结尾。

  主题对话框中的文本控件遵循 Windows 桌面 UX 指南 ，并且不采取结束标点符号，但帮助链接中的问号除外。

• 检查框和选项按钮的标签以谓词开头，仅首字首字母首字母，没有结束标点符号。

• 按钮、菜单、菜单项和选项卡的标签在每个单词（标题大小写）上都有初始大写。

• 标签术语应与其他对话框中的类似标签保持一致。

• 如果可能，请在编写器/编辑器写入或批准文本，然后再转到开发人员进行实现。

• 所有控件都应具有标签，但在选项卡设置足够的特殊情况下除外。 适当时使用帮助程序文本。

帮助程序文本

包含在对话中，以帮助用户了解对话的目的或指示要执行的操作。 仅当需要以避免混乱的简单对话时，才应使用帮助程序文本。 帮助程序文本的两种变体是对话和水印。

请遵循帮助程序文本的常用位置，并在引入新领域时有选择。 帮助程序文本的常见方案包括：

• 对话中的帮助程序文本，提供有关如何与复杂对话交互的其他方向。

• 空工具窗口或对话框中的水印文本，以解释为何不显示任何内容。

• 说明窗格，如属性窗口底部。

• 空编辑器中的水印文本，用于说明用户应采取的操作。

对话框帮助程序文本

用户体验设计器可能有助于确定帮助程序文本是否合适。 设计器可以定义帮助程序文本的显示位置及其常规内容。 用户帮助可以编写/编辑实际文本。

水印

对话受益于略有不同的水印准则。 由于对话框可能正忙于许多 UI 元素（带有文本的标签、提示文本、按钮和其他容器控件），尤其是当这些元素以黑色显示时，水印在深灰色（VSColor： ButtonShadow） 中表现得更好。 通常，水印显示在控件中，如具有白色背景的列表框（VSColor： Window） 。

• 文本显示为深灰色（VSColor： ButtonShadow）。 但是，如果水印出现在中等灰色或其他彩色（VSColor： ButtonFace）背景上，并且担心其可读性，请使用黑色文本（VSColor： ） WindowText。

• 水印可以居中或向左刷新。 制定对齐决策时应用标准设计规则。 不能在后台选择水印。

水印文本示例

特定于上下文（动态）文本

动态文本可以在对话或无模式 UI 中使用两种方式之一：作为动态标签或动态内容。

• 动态标签：动态文本的常见用途是在描述性面板中提供选定项的详细信息，例如，在对话框中，其中包含右侧网格中显示的元素和属性列表。 属性网格的标签可能是动态的，以便在左侧选择某个项时，右侧的网格显示该特定项的信息。

• 动态文本：在需要以这种方式显示特定信息而不是常规信息的实例中非常有用，但应注意不要过度使用。

如果希望用户能够复制信息，动态文本应位于只读文本字段中。

按钮和超链接

按钮和链接控件（超链接）应遵循 有关使用、措辞、大小调整和间距的超链接 的基本 Windows 桌面指南。

在按钮和链接之间进行选择

传统上，按钮用于操作，超链接已保留用于导航。 按钮可用于所有情况，但链接的角色已在 Visual Studio 中扩展，以便按钮和链接在某些条件下更易于互换。

何时使用命令按钮：

• 主要命令

• 显示用于收集输入或做出选择的窗口，即使它们是辅助命令

• 破坏性或不可逆的操作

• 向导和页面流中的承诺按钮

避免工具窗口中的命令按钮，或者如果标签需要两个以上的单词。 链接可以具有较长的标签。

何时使用链接：

• 导航到另一个窗口、文档或网页

• 需要较长标签或短句来描述操作意图的情况

• 按钮会淹没 UI 的紧密空间，前提是操作没有破坏性或不可逆

• 在有许多命令的情况下，取消强调辅助命令

示例

在 InfoBar 中使用命令链接后的状态消息

CodeLens 弹出中使用的链接

用于辅助命令的链接，其中按钮会吸引太多注意力

常见按钮

文本

遵循 UI 文本和术语中的写作准则。

视觉样式

标准（未点名）

Visual Studio 中的大多数按钮将显示在实用工具对话框中，不应设置样式。 它们应反映操作系统规定的按钮的标准外观。

主题

在某些情况下，按钮可以在样式化 UI 中使用，并且这些按钮必须适当设置样式。 有关主题控件的信息，请参阅 对话框 。

特殊按钮

浏览。。。按钮

[浏览...] 按钮用于网格、对话框和工具窗口和其他无模式 UI 元素。 他们显示一个选取器，帮助用户将值填充到控件中。 此按钮有两种变体，长而短。

长 [浏览...] 按钮

仅省略号短 — 按钮

何时使用仅省略号短按钮：

• 如果对话框中有多个长 [浏览...] 按钮，就像多个字段允许浏览时一样。 对每个按钮使用短 = 按钮，以避免这种情况（在同一对话框中浏览 和 B&rowse ）创建的令人困惑的访问键。

• 在紧张的对话框中，或没有合理的位置放置长按钮。

• 如果该按钮将显示在网格控件中。

使用按钮的指南：

• 请勿使用访问密钥。 若要使用键盘访问它，用户必须从相邻控件进行选项卡。 确保 Tab 键顺序使任何浏览按钮紧随其填充的字段之后。 不要在第一个句点下方使用下划线。

• 将 Microsoft Active Accessibility （MSAA） Name 属性设置为“浏览...”（包括省略号），以便屏幕阅读器将读取为“浏览”而不是“dot-dot-dot”或“period-period-period”。对于托管控件，这意味着设置 AccessibleName 属性。

• 从不对浏览操作以外的任何内容使用省略号 ... 按钮。 例如，如果需要 [新建...] 按钮，但文本空间不足，则需要重新设计对话框。

大小调整和间距

调整[浏览...]按钮大小

设置[浏览...]按钮间距

图形按钮

某些按钮应始终使用图形图像，并且从不包含文本来节省空间并避免本地化问题。 这些通常用于字段选取器和其他可排序列表。

注意

用户必须按 Tab 键访问这些按钮（没有访问密钥），因此按合理的顺序放置它们。 将 name 按钮的属性映射到它执行的操作，以便屏幕阅读器正确解释按钮操作。

函数	Button
添加
删除
全部添加
全部删除
上移
“下移”
删除

大小调整和间距

图形按钮的大小调整与 [浏览...] 按钮的短版本相同（26x23 像素）：

按钮上图形图像的外观，并且不显示透明颜色

超链接

超链接非常适合基于导航的操作，例如打开帮助主题、模式对话框或向导。 如果超链接用于命令，它应始终显示对 UI 的可见且明显的更改。 通常，提交操作的操作（如“保存”、“取消”和“删除”）最好使用按钮进行通信。

写入样式

按照 Windows 桌面指南操作用户界面文本。 不要使用“了解详细信息”、“告诉我更多”或“获取有关此帮助”的措辞。 相反，短语帮助链接文本，以帮助内容回答的主要问题。 例如，“如何实现将服务器添加到服务器资源管理器？”

视觉样式

• 超链接应始终使用 VSColor 服务。 如果超链接未正确设置样式，则当活动或访问后显示其他颜色时，它会闪烁为红色。

• 除非链接是完整句子中的句子片段，如水印中，否则不要在控件休息状态中包含下划线。

• 悬停时不应显示下划线。 相反，向用户反馈链接处于活动状态是轻微的颜色更改和相应的链接光标。

树视图

树视图提供了一种将复杂列表组织到父子组的方法。 用户可以展开或折叠父组，以显示或隐藏基础子项。 可以选择树视图中的每个项以提供进一步的操作。

树视图视觉样式

扩展器

树视图控件应符合 Windows 和 Visual Studio 使用的扩展器设计。 每个节点使用扩展器控件来显示或隐藏基础项。 使用扩展器控件可为在 Windows 和 Visual Studio 中遇到不同树视图的用户提供一致性。

正确：使用扩展器控件正确样式的树视图节点

错误：树视图节点的样式不正确

选择

在树视图中选择节点时，突出显示应扩展到树视图控件的完整宽度。 这有助于用户清楚地识别他们选择的项目。 选择颜色应反映当前的 Visual Studio 主题。

正确：所选节点的突出显示符合树视图控件的整个宽度。

错误：所选节点的突出显示不适合树视图控件的整个宽度。

图标

仅当图标有助于直观识别项目之间的差异时，才能在树视图控件中使用图标。 通常，图标应仅在包含信息的异类列表中使用图标来区分元素类型。 在使用图标的同质列表中，通常被视为干扰，应避免。 在这种情况下，组图标（父级）可以传达其中项的类型。 此规则的例外是，如果图标是动态的，并且用于指示状态。

滚动栏

如果内容适合树视图控件，则始终隐藏滚动条。 滚动条在可滚动窗口中隐藏或半透明是可以接受的，当包含树视图的窗口具有焦点或悬停在树视图本身时显示。

显示垂直滚动条和水平滚动条，因为内容已超出树视图控件的限制。

树视图交互

上下文菜单

树视图节点可以在上下文菜单中显示子菜单选项。 通常，当用户右键单击某个项或按下 Windows 键盘上的菜单键并选择该项时，将发生这种情况。 节点获得焦点并被选中非常重要。 这有助于用户确定子菜单所属的项。

生成上下文菜单的项获得焦点，以通知用户已选择哪个项。

键盘

树视图应提供使用键盘选择项和展开/折叠节点的功能。 这可确保导航满足我们的辅助功能要求。

树视图控件

Visual Studio 树控件应遵循常见的键盘导航：

• 向上键： 通过向上移动树选择项

• 向下箭头： 通过向下移动树选择项

• 向右键： 展开树中的节点

• 向左键： 折叠树中的节点

• 输入键： 启动、加载、执行所选项

Trid （树视图和网格视图）

尝试的控件是包含网格中的树视图的复杂控件。 展开、折叠和导航树应遵循与树视图相同的键盘命令，并添加以下内容：

• 向右键： 展开节点。 展开节点后，它应继续导航到右侧最近的列。 导航应在行末尾停止。

• 选项卡： 导航到右侧最近的单元格。 在行的末尾，导航继续到下一行。

• Shift + Tab： 导航到左侧最近的单元格。 在行的开头，导航继续位于上一行中最右侧的单元格。

Visual Studio 中的尝试控件