进度控件

进度控件将为用户提供关于正在处理运行时间较长的操作的反馈。 这可能意味着当进度指示器可见时，用户无法与应用程序进行交互，也可能表示等待时间可能有多长，具体取决于所使用的指示器。

进程类型

有两种控件可以向用户显示操作正在进行 - 通过 ProgressBar 或 ProgressRing。 ProgressBar 和 ProgressRing 都有两种状态，用于传达用户是否可以与应用程序进行交互。

• ProgressBar 和 ProgressRing 的确定状态显示任务的完成百分比。 此控件应该在持续时间已知的操作中使用，但进度不应阻止用户与应用交互。
• ProgressBar 的不确定状态显示操作正在进行、没有阻止用户与应用交互，并且完成时间未知。
• ProgressRing 的不确定状态显示操作正在进行、阻止了用户与应用交互，并且完成时间未知。

另外，进度控件为只读，不具有交互性。 这意味着用户不能直接调用或使用这些控件。

控制	显示
不确定的进度栏
确定的进度栏
不确定的进度环
确定的 ProgressRing

这是正确的控件吗？

在试图显示正在发生的事情时，使用什么控制或什么状态（确定状态与不确定状态）并不总是很明显。 有时不需要进度控件也明显可知任务执行进度，而有时即使使用了进度控件，仍需要使用一行文本向用户解释正在进行的操作。

ProgressBar

• 该控件是否具有已定义的持续时间，或者结束时间是否已预测？

  然后使用一个确定的 ProgressBar，并相应地更新百分比或数值。

• 用户是否可以在不监视操作进度的情况下继续操作？

  当 ProgressBar 处于使用中时，交互是非模态的，这通常意味着用户不会因该操作的未完成而受到阻止，而是可以在该操作完成之前继续以其他方式使用应用。

• 关键字

  如果你的操作与这些关键字相近，或者你想在进行中的操作旁显示与这些关键字相同的文本，请考虑使用 ProgressBar：

  • 正在加载...
  • 正在检索
  • 正在处理...

ProgressRing

• 该操作会使用户等候继续操作吗？

  如果操作需要全部（或大部分）应用交互等到它完成后才能进行，则最好选择不确定的 ProgressRing。

  • 该控件是否具有已定义的持续时间，或者结束时间是否已预测？

  如果希望视觉对象是环而不是条，请使用确定的 ProgressRing，并相应地更新百分比或值。

• 应用是否需要等待用户完成某个任务？

  如果是，请使用不确定的 ProgressRing，因为它们为用户指示未知的等待时间。

• 关键字

  如果你的操作与这些关键字相近，或者你想在进行中的操作旁显示与这些关键字相同的文本，请考虑使用 ProgressRing：

  • 正在刷新
  • 正在登录...
  • 正在连接...

不需要任何进度指示

• 用户需要知道发生了什么情况吗？

  例如，如果应用在后台下载内容，但下载不是由用户启动的，则不一定要将此行为告知用户。

• 操作是否属于不会阻止用户活动且用户基本不感兴趣（但略有趣）的后台活动？

  当应用正在执行一些不需要一直显示的任务，但仍需要显示状态时，则可以使用文本。

• 用户是否仅仅关注操作完成与否？

  有时最好仅在操作完成后显示一条通知，或者从视觉上提示已瞬时完成操作，并在后台进行最后的处理。

进度控件最佳做法

也许通过图像最好理解应该在什么情况下使用各种进度控件：

ProgressBar - 确定

第一个示例是确定 ProgressBar。 当安装、下载、设置等操作的持续时间已知时，最好使用确定的 ProgressBar。

ProgressBar - 不确定

如果不知道操作需要多长时间，则使用不确定的 ProgressBar。 在填充虚拟化列表时，不确定的 ProgressBar 也很有用，可在不确定状态之间创建确定 ProgressBar 的平滑视觉转换。

• 操作是否在虚拟化集合中？

  如果是这样，请不要在每个列表项目上显示进度指示器。 取而代之的是使用 ProgressBar，并将其置于正在加载的项目集合的顶部，以显示项目正在被获取。

ProgressRing - 不确定

当暂时不允许用户与应用进行任何进一步交互，或应用正在等待用户输入以便继续运行时，应使用不确定性 ProgressRing。 上面的“正在登录…”一例是最适合使用 ProgressRing 的场景：在登录完成前，用户无法继续使用该应用。

ProgressRing - 确定

如果操作持续时间已知且需要环形视觉对象，则最好使用确定 ProgressRing 显示何时安装、下载、设置等。

UWP 和 WinUI 2

重要

本文中的信息和示例是针对使用 Windows App SDK 和 WinUI 3 的应用优化的，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请查看 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

用于 UWP 应用的进度控件是 WinUI 2 的一部分。 有关详细信息（包括安装说明），请参阅 WinUI 2。 此控件的 API 存在于 Windows.UI.Xaml.Controls 和 Microsoft.UI.Xaml.Controls 命名空间中。

• UWP API：ProgressBar 类、IsIndeterminate 属性、ProgressRing 类、IsActive 属性
• WinUI 2 Apis：ProgressBar 类、IsIndeterminate 属性、ProgressRing 类、IsActive 属性
• 打开 WinUI 2 图库应用，查看 ProgressBar 或 ProgressRing。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式、模板和功能。 WinUI 2.2 或更高版本包含此控件的使用圆角的新模板。 有关详细信息，请参阅圆角半径。

要将本文中的代码与 WinUI 2 配合使用，请使用 XAML 中的别名（我们使用 muxc）来表示项目中包含的 Windows UI 库 API。 有关详细信息，请参阅 WinUI 2 入门。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ProgressBar />
<muxc:ProgressRing />

创建进度控件

• 重要 API：ProgressBar 类、IsIndeterminate 属性、ProgressRing 类、IsActive 属性

打开 WinUI 3 图库应用，查看 ProgressBar 或 ProgressRing。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

这两种进度控件都比较简单；但控件的某些视觉特征在定制时并不明显。

设置 ProgressRing 的大小

ProgressRing 的大小可以随心所欲，但最小只能是 20x20epx。 要调整 ProgressRing 的大小，必须设置其高度和宽度。 如果只设置了高度或宽度，控件将假定最小尺寸 (20x20epx)，反之，如果高度和宽度设置为两种不同的尺寸，则假定其中较小的尺寸。 要确保 ProgressRing 符合需要，请将高度和宽度设为相同值：

<ProgressRing Height="100" Width="100"/>

要使 ProgressRing 可见并具有动画效果，则必须将 IsActive 属性设置为 true：

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

为进度控件着色

默认情况下，进度控件的主色调设置为系统的主题色。 要覆盖此画笔，只需更改任一控件的前景属性即可。

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

更改 ProgressRing 的前景色将更改进度环的填充颜色。 ProgressBar 的前景属性将改变条形图的填充颜色 - 要改变条形图的未填充部分，只需覆盖背景属性即可。

显示等待光标

当应用或操作需要反应时间，最好只显示简单的等待光标，指示用户不应与应用或显示了等待光标的区域交互，直到等待光标消失。

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

获取示例代码

• WinUI 库示例 - 以交互式格式查看所有 XAML 控件。

相关文章

• ProgressBar 类
• ProgressRing 类