プログレス コントロール

プログレス コントロールは、実行時間の長い操作が進行中であることをユーザーにフィードバックします。 これは、進行状況インジケーターが表示されているときにユーザーがアプリを操作できないことを意味し、使用するインジケーターに応じて待機時間の長さを示すこともできます。

進行状況の種類

操作が進行中であることをユーザーに示すコントロールは、ProgressBar と ProgressRing の 2 つです。 ProgressBar と ProgressRing のどちらにも、ユーザーがアプリケーションと対話できるかどうかを伝える 2 つの状態があります。

• ProgressBar と ProgressRing の両方の 状態を決定する には、タスクの完了率が表示されます。 これは、期間がわかっている操作の間に使いますが、その進行状況でユーザーのアプリとのやり取りはブロックされません。
• ProgressBar の 不確定 な状態は、操作が進行中であり、ユーザーによるアプリとの対話をブロックせず、完了時間が不明であることを示しています。
• ProgressRing の 不確定 な状態は、操作が進行中であり、アプリとのユーザー操作をブロックし、完了時間が不明であることを示しています。

なお、プログレス コントロールは読み取り専用で、対話型ではありません。 つまり、ユーザーがこれらのコントロールを直接呼び出したり、使用したりすることはできません。

コントロール	ディスプレイ
不確定な ProgressBar
確定的な ProgressBar
不確定な ProgressRing
確定的な ProgressRing	ProgressRing 状態 を決定する

これは適切なコントロールですか?

何かが発生していることを示そうとするときに使用する制御や状態 (決定と不確定) が必ずしも明確であるとは限りません。 タスクの内容が明らかでプログレス コントロールを使う必要がないときもあり、プログレス コントロールを使う場合でも、どういう操作が進行中かをユーザーに説明するために 1 行のテキストが必要なときもあります。

進捗バー

• コントロールには、期間または予測可能な終了が定義されていますか?

  次に確定 ProgressBar を使用し、それに応じてパーセンテージまたは値を更新します。

• ユーザーは操作の進行状況を監視せずに続行できますか?

  ProgressBar の使用中、やり取りは非モーダルであり、通常はその操作が完了するまでユーザーがブロックされることはありません。操作が完了するまで、その他の方法でアプリを使い続けることができます。

• キーワード

  操作で次のようなキーワードが表示される場合、または進行状況の処理と同時にこれらのキーワードと一致するテキストを表示する場合は、ProgressBar の使用を検討してください。

  • 読み込み中...
  • の取得
  • ワーキング。。。

プログレスリング

• 操作によって、ユーザーは続行を待機しますか?

  操作によって、操作が完了するまでアプリとのすべて (または大部分) のやり取りを待つことが必要になる場合は、不確定な ProgressRing の方が適しています。

  • コントロールには、期間または予測可能な終了が定義されていますか?

  バーではなくリングのビジュアルが必要な場合は確定的な ProgressRing を使用し、それに応じてパーセンテージまたは値を更新します。

• アプリはユーザーがタスクを完了するのを待機していますか?

  その場合は、不確定の ProgressRing を使用して不明の待ち時間をユーザーに示します。

• キーワード

  操作で次のようなキーワードが表示される場合、または進行状況の処理と同時にこれらのキーワードと一致するテキストを表示する場合は、ProgressRing の使用を検討してください。

  • 爽やか
  • サインイン...
  • 接続。。。

進行状況の表示は必要ありません

• ユーザーは何かが起こっていることを知る必要がありますか?

  たとえば、アプリがバックグラウンドで何かをダウンロードしていて、ダウンロードを開始したのがユーザーでない場合、ユーザーは必ずしもそのことを知る必要がありません。

• 操作は、ユーザー アクティビティをブロックせず、ユーザーにとって最小限の (ただし、まだ一部の) 関心があるバックグラウンド アクティビティですか?

  アプリが常に表示される必要のないタスクを実行しているが、状態を表示する必要がある場合は、テキストを使用します。

• ユーザーは操作の完了のみを考慮しますか?

  操作が完了したときだけ通知を表示するか、操作がすぐに完了したというビジュアルを表示し、最後の仕上げをバック グラウンドで実行することが最良のときがあります。

進行状況コントロールのベスト プラクティス

これらのさまざまなプログレス コントロールを使用する状況と場所の視覚的な表現をいくつか表示することが最良のときがあります。

ProgressBar - 確定

最初の例は、確定 ProgressBar です。 インストール、ダウンロード、設定など、操作の期間がわかっている場合は、確定 ProgressBar が最適です。

ProgressBar - 不確定

操作にかかる時間がわからない場合は、不確定 ProgressBar を使用します。 不確定 ProgressBar は、仮想化されたリストを入力し、不確定から確定 ProgressBar へのスムーズな視覚的な遷移を作成する場合にも適しています。

• 仮想化されたコレクション内の操作ですか?

  その場合は、表示される各リスト アイテムに進行状況インジケーターを配置しないでください。 代わりに、ProgressBar を使用し、読み込まれる項目のコレクションの先頭に配置して、項目がフェッチされていることを示します。

ProgressRing - 不確定

ユーザーのそれ以上のアプリとのやり取りが停止されたとき、またはアプリがユーザーの入力を待っているときは、不確定 ProgressRing が使われます。 上記の "サインインしています..." の例は、ProgressRing の完全なシナリオであり、ユーザーはサインインが完了するまでアプリの使用を続けることはできません。

ProgressRing - 確定

インストール、ダウンロード、設定など、操作の期間がわかっていて、リングのビジュアルが望ましいときは、確定の ProgressRing が最適です。

進行状況コントロールの作成

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを取得する

どちらの進行状況コントロールも単純です。ただし、コントロールの一部の視覚的な機能は、カスタマイズするのが明白ではありません。

ProgressRing のサイズの設定

ProgressRing のサイズ拡大上限はありませんが、下限は 20 x 20epx までです。 ProgressRing のサイズを変更するには、その高さと幅を設定する必要があります。 高さまたは幅のみが設定されている場合、コントロールは最小サイズ (20 x 20epx) を想定します。逆に、高さと幅が 2 つの異なるサイズに設定されている場合は、サイズの小さい方が想定されます。 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);

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 />

関連記事

• ProgressBar クラス
• ProgressRing クラス