共用方式為

進度控制項

  • 發行項

進度控制項會傳送回饋給使用者，指出長時間執行的作業正在進行中。 也就是說，使用者可能無法在進度指標顯示時與應用程式互動，而視所用指標而定，它也可能指出大約等候時間。

進度類型

有兩種控制項可向使用者顯示作業正在進行中，分別是 ProgressBar 或 ProgressRing。 ProgressBar 和 ProgressRing 都有兩個狀態，可傳達使用者是否可與應用程式互動。

  • ProgressBar 和 ProgressRing 的「確定」狀態會顯示工作已完成的百分比。 此控制項應用於已知持續時間的作業，但其進度不應封鎖使用者與應用程式的互動。
  • ProgressBar 的「不確定」 (indeterminate) 狀態會顯示作業正在進行中，其不會封鎖使用者與應用程式的互動，且無法得知完成的時間。
  • ProgressRing 的「不確定」 (indeterminate) 狀態會顯示作業正在進行中，其會封鎖使用者與應用程式的互動，且無法得知完成的時間。

此外，進度控制項是唯讀的，無法互動。 這表示使用者無法直接叫用或使用這些控制項。

控制 顯示器
不確定的 ProgressBar ProgressBar 不確定
確定的 ProgressBar ProgressBar 確定
不確定的 ProgressRing 不確定 ProgressRing 狀態
確定 ProgressRing 確定 ProgressRing 狀態

這是正確的控制項嗎？

嘗試顯示某種動作正在進行中時，應使用何種控制項或狀態 (確定與不確定) 並非總是顯而易見的事。 有時候工作本身已足夠明顯，因此完全不需要進度控制項 – 而有時候即使已使用進度控制項，卻仍需要文字來向使用者說明進行中的作業。

ProgressBar

  • 控制項是否有已定義的持續時間或可預測的結束時間？

    接著使用確定的 ProgressBar，並據以更新百分比或值。

  • 使用者可以繼續，而不必監視操作的進度嗎？

    當 ProgressBar 正在使用中時，互動為非強制回應的，通常表示使用者不會因該作業未完成而受到封鎖，而且可以繼續以其他方式使用該應用程式，直到該方面的作業完成為止。

  • 關鍵字

    如果您的作業接近這些關鍵字的意思，或如果您要在作業進度旁邊顯示的文字符合這些關鍵字，請考慮使用 ProgressBar：

    • 正在載入...
    • 正在抓取
    • 處理中...

ProgressRing

  • 該作業是否會導致使用者必須等候才能繼續？

    如果作業完成之前會需要所有 (或大部分) 與應用程式的互動先等候，則不確定 ProgressRing 是較佳的選項。

    • 控制項是否有已定義的持續時間或可預測的結束時間？

    如果您希望視覺效果是環形而非長條形，請使用確定 ProgressRing，並據以更新百分比或值。

  • 應用程式是否在等候使用者完成工作？

    如果是，請使用不確定 ProgressRing，因為其專門用來為使用者指示未知的等候時間。

  • 關鍵字

    如果您的作業接近這些關鍵字的意思，或如果您要在作業進度旁邊顯示的文字符合這些關鍵字，請考慮使用 ProgressRing：

    • 正在重新整理
    • 正在登入...
    • 正在連線...

不需要任何進度指示

  • 使用者是否需要知道發生什麼事？

    例如，如果應用程式正在背景進行下載，而使用者並未起始下載，則使用者不需要知道這項下載作業。

  • 作業是否屬於不會阻擋使用者活動，且使用者不感興趣 (但仍有一些興趣) 的背景活動？

    如果您的應用程式執行的工作不需要持續顯示，您可以使用文字，但仍需要顯示狀態。

  • 使用者是否只在意作業已經完成？

    有時，最好只在作業完成時顯示通知，或在作業完成時立即提供視覺提示，並在背景完成最終作業。

進度控制項最佳做法

有時看看一些不同進度控制項的使用時機與方式的視覺化範例會比較清楚：

ProgressBar - 確定

確定 ProgressBar 範例

第一個範例是確定的 ProgressBar。 當作業的持續時間已知 (比如正在安裝、下載、設定等的時候)，則確定的 ProgressBar 是最佳選項。

ProgressBar - 不確定

不確定 ProgressBar 範例

如果作業持續時間未知，請使用不確定的 ProgressBar。 在填滿虛擬化清單，以及在不確定和確定的 ProgressBar 之間建立流暢的視覺效果轉換時，也可使用不確定的 ProgressBar。

  • 該作業是否是在虛擬的集合中？

    如果是，請勿在每個清單項目顯示時放上進度指標。 請改用 ProgressBar，並將它放在載入的項目集合頂端，以便顯示系統正在擷取項目。

ProgressRing - 不確定

不確定 ProgressRing 範例

當使用者與應用程式之間任何進一步的互動停止時，或應用程式正在等候使用者輸入以繼續時，會使用不確定的 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 命名空間中。

我們建議使用最新的 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 />

建立進度控制項

開啟 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);

取得範例程式碼