Xamarin.Forms ProgressBar

サンプルのダウンロード

Xamarin.FormsProgressBar コントロールは、float 値によって表される割合まで塗りつぶされる水平バーとして、進行状況を視覚的に表します。 ProgressBar クラスは View から継承します。

次のスクリーンショットは、iOS と Android での ProgressBar を示しています。

ProgressBar コントロールは、次の 2 つのプロパティを定義します。

• Progress は、現在の進行状況を 0 から 1 の値で表す float 値です。 Progress 0 未満の値は 0 にクランプされ、1 より大きい値は 1 にクランプされます。
• ProgressColor は、現在の進行状況を表す内部バーの色に影響を及ぼす Color です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、ProgressBar はスタイルを設定可能であり、データ バインディングの対象にできます。

また、ProgressBar コントロールは、現在の値から指定された値までバーをアニメーション化する、ProgressTo メソッドも定義します。 詳細については、「ProgressBar をアニメーション化する」をご覧ください。

Note

ProgressBar はユーザー操作を受け付けないため、Tab キーを使用してコントロールを選択するとスキップされます。

ProgressBar を作成する

ProgressBar は XAML でインスタンス化できます。 その Progress プロパティは、色付きの内部バーの塗りつぶしの割合を決定します。 Progress プロパティの既定値は 0 です。 次の例は、省略可能な Progress プロパティ セットを使用して XAML で ProgressBar をインスタンス化する方法を示しています。

<ProgressBar Progress="0.5" />

ProgressBar はコードで作成することもできます。

ProgressBar progressBar = new ProgressBar { Progress = 0.5f };

警告

Center、Start、End、ProgressBar などの制約のない水平レイアウト オプションを使用しないでください。 UWP では、ProgressBar によって幅が 0 のバーに折りたたまれます。 HorizontalOptions の既定値の Fill を保持し、ProgressBar を Grid レイアウトに配置するときに、幅 Auto を使用しないでください。

ProgressBar の外観のプロパティ

Progress プロパティが 0 より大きい場合、ProgressColor プロパティは内部バーの色を定義します。 次の例は、ProgressColor プロパティが設定された ProgressBar を XAML で インスタンス化する方法を示しています。

<ProgressBar ProgressColor="Orange" />

コード内で ProgressBar を作成するときに、ProgressColor プロパティも設定できます。

ProgressBar progressBar = new ProgressBar { ProgressColor = Color.Orange };

次のスクリーンショットは、iOS と Android で ProgressColor プロパティが Color.Orange に設定された ProgressBar を示します。

ProgressBar をアニメーション化する

ProgressTo メソッドは、ProgressBar を現在の Progress 値から指定された値まで時間の経過とともにアニメーション化します。 このメソッドは、float 進行状況値、uint ミリ秒単位の継続時間、Easing 列挙値を受け取り、Task<bool> を返します。 次のコードは、ProgressBar をアニメーション化する方法を示します。

// animate to 75% progress over 500 milliseconds with linear easing
await progressBar.ProgressTo(0.75, 500, Easing.Linear);

Easing 列挙型の詳細については、「Xamarin.Forms のイージング関数」を参照してください。

関連リンク

• ProgressBar のデモ