控件是构成Windows应用的 UI 元素—按钮、文本字段、列表、选取器等。 控件显示内容或允许用户与应用交互。 模式将多个控件结合为一种可重用的解决方案,适用于常见场景,例如表单或列表-详细布局。
Windows提供超过 45 个现成的控件,所有控件都基于 Fluent Design System。 从简单的切换到网格和列表等丰富的数据视图,这些控件可帮助你生成跨设备直观优化、可访问和响应的接口。
浏览本部分中的文章,了解每个控件和模式的设计指南、代码示例和最佳做法。
入门指南
若要了解如何向应用添加控件并连接事件处理程序,请参阅 “添加控件并处理事件”。 若要使用可重用的 XAML 样式自定义控件外观,请参阅 “设置控件样式”。
控件
下表列出了 WinUI 中可用的Windows应用控件,并提供了指向其文档的链接。
基本输入
| 图像 | 控制 | 说明 |
|---|---|---|
|
按钮 | 响应用户输入并引发 Click 事件的控件。 包括按钮、下拉按钮、拆分按钮、切换按钮等。 |
|
复选框 | 用户可以选择或清除的控件。 |
|
组合框 | 用户可以选择的下拉列表。 |
|
Hyperlinks | 显示为超链接文本的按钮,可以导航到 URI 或处理 Click 事件。 |
|
单选按钮 | 允许用户从一组选项中选择单个选项的控件。 |
|
分级控件 | 从 1 到 5 星进行评分。 |
|
滑块 | 允许用户通过沿着轨道移动 Thumb 控件从一系列值中进行选择的控件。 |
|
切换开关 | 可在 2 种状态之间切换的开关。 |
Collections
| 图像 | 控制 | 说明 |
|---|---|---|
|
项目视图 | 使用各种布局呈现项目集合的控件。 |
|
列表视图和网格视图 | 在垂直列表中或行和列中显示项集合的控件。 |
|
翻转视图 | 显示一个用户可以逐个翻动查看的项目集合。 |
|
Pips 寻呼器 | 当用户不需要直观地知道页码时,允许用户在分页集合中导航的控件。 |
|
树视图 | 一种具有展开和折叠功能节点、并包含嵌套项的分层列表模式。 |
|
项目重复器 | 数据驱动布局的灵活基元控件。 |
|
滑动 | 用于在项目上执行快速菜单操作的触摸手势。 |
|
下拉刷新 | 提供拉取列表/网格中的项集合以刷新集合的内容的功能。 |
对话框和弹出窗口
| 图像 | 控制 | 说明 |
|---|---|---|
|
对话 框 | 可以自定义以包含任何 XAML 内容的对话框。 |
|
弹出控件 | 显示上下文信息并启用用户交互。 |
|
教学提示 | 一个内容丰富的弹出窗口,用于指导用户并提供教学契机。 |
表单
| 图像 | 控制 | 说明 |
|---|---|---|
| 表单 | 使用输入控件和标签的组合收集和提交用户输入的模式。 |
媒体、图形和形状
| 图像 | 控制 | 说明 |
|---|---|---|
|
图标 | 表示将不同图像类型用作内容的图标控件。 |
|
|
动画图标 | 一个元素,它显示并控制当用户与控件交互时动画的图标。 |
|
图像和图像画笔 | 用于显示图像内容的控件。 |
| 墨迹 | 用于数字墨迹书写的控件,包括墨迹画布和墨迹工具栏。 | |
|
媒体播放 | 用于显示视频和图像内容的控件。 |
|
形状 | 绘制椭圆、矩形和多边形等形状。 |
菜单和工具栏
| 图像 | 控制 | 说明 |
|---|---|---|
|
菜单和上下文菜单 | 显示简单命令或选项的上下文列表。 |
|
命令栏 | 用于显示应用程序特定的命令的工具栏,用于处理其内容的布局和大小调整。 |
|
命令栏浮出控件 | 显示主动命令的迷你工具栏和命令的可选菜单。 |
|
菜单浮出控件和菜单栏 | 经典菜单,允许显示包含菜单飞出项的菜单项。 |
导航
| 图像 | 控制 | 说明 |
|---|---|---|
|
面包屑导航栏 | 显示到达当前位置的导航路径。 |
| 列表/细节 | 一种模式,显示项列表和当前所选项的详细信息。 | |
|
导航视图 | 使用可折叠导航菜单为应用的顶级区域实现常见垂直布局。 |
|
透视 | 在选项卡式视图中显示来自不同源的信息。 |
|
选择器栏 | 显示来自少数不同来源的信息。 用户可以选取其中一个。 |
|
选项卡视图 | 显示可用于显示多个文档的选项卡集合的控件。 |
People
| 图像 | 控制 | 说明 |
|---|---|---|
|
个人照片 | 显示人员/联系人的图片。 |
Pickers
| 图像 | 控制 | 说明 |
|---|---|---|
|
颜色选取器 | 显示可选择的光谱的控件。 |
|
日历日期选取器 | 允许用户使用日历选取日期值的控件。 |
|
日历视图 | 一个控件,用于向用户显示日历,以便从中选择日期。 |
|
日期选取器 | 允许用户选取日期值的控件。 |
|
时间选取器 | 允许用户选取时间值的可配置控件。 |
滚动和布局
| 图像 | 控制 | 说明 |
|---|---|---|
|
扩展器 | 用于显示包含更多内容的正文的容器,其标题可以展开。 |
|
滚动和平移控件 | 允许用户平移和缩放其内容的容器控件。 |
|
带批注的滚动条 | 一个控件,用于扩展常规垂直滚动条的功能,以便轻松浏览大型集合。 |
|
语义式缩放 | 允许用户缩放集合的两个不同的视图,以便更轻松地浏览大型项集合。 |
|
拆分视图 | 包含两个内容区的容器,具有多个窗格的显示选项。 |
|
双窗格视图 | 一个控件,其中包含跨越可用空间的两个内容区域(并排或上下)。 |
状态和信息
| 图像 | 控制 | 说明 |
|---|---|---|
|
Progress | 通过进度栏或进度环显示应用程序任务的进度。 |
|
工具提示 | 在弹出窗口中显示元素的信息。 |
|
信息栏 | 用于显示整个应用程序状态更改信息的内联消息。 |
|
信息徽章 | 用于显示通知或将焦点置于某个区域的非侵入性 UI。 |
文本
| 图像 | 控制 | 说明 |
|---|---|---|
|
自动建议框 | 用于在用户键入时提供建议的控件。 |
|
文本块 | 用于显示少量文本的轻量控件。 |
|
富文本块 | 显示格式化文本、超链接、内联图像和其他丰富内容的控件。 |
|
文本框 | 单行或多行纯文本字段。 |
|
Rich Edit 框 | 支持格式化文本、超链接和其他丰富内容的 RTF 编辑控件。 |
|
密码框 | 用于输入密码的控件。 |
|
数字框 | 用于对代数公式进行数值输入和计算的文本控件。 |
| 标签 | 添加可访问标签到输入控件的指南。 |
标题栏
| 图像 | 控制 | 说明 |
|---|---|---|
|
标题栏 | 自定义应用窗口的标题栏。 |
WinUI 3 示例库
WinUI 3 画廊应用是体验这些控件的最佳方式。 它提供大多数 WinUI 控件、功能和 Fluent Design 模式的交互式演示,使其成为本文档的理想助手。 安装它以实时尝试控件,并从单个控件页直接链接。
- 从 Microsoft 应用商店获取 WinUI 3 画廊 。
- 从 GitHub 获取源代码。
其他控件和资源
Windows Community Toolkit是帮助程序、扩展和其他 UI 控件的集合,它们补充了内置的 WinUI 控件。 它由Microsoft进行社区驱动和维护,涵盖高级布局、转换器和动画等常见方案。
若要提前访问实验性控件和功能,请参阅 Windows Community Toolkit Labs,新组件会在这里开发和测试,然后再加入主工具包。