何か重たい処理をしている際にユーザにストレスをかけないように今、どこまで進捗が進んでいるのかを視覚的に表してくれるコントロールがあります。それがProgressBarコントロールです。

今回はこのProgressBarコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。

ProgressBarの使い方

かりまたかりまた

使い方は簡単で、以下のようにXamlに記述するのみです。

実際にどう動くのか?

Windows8.1AndroidiPhone
かりまたかりまた

プロパティを設定しないでProgressBarコントロールを配置するとこれらのように表示されます。コントロールの表示自体はされますが、当たり前のように何も動きません。

ProgressBarのPublicプロパティ一覧

Progressプロパティ

ProgressBarのプロパティをXamlで適用してみる

りんちゃんりんちゃん

MainPage.xamlに以下のように記述してみてにゃ~。

Windows8.1AndroidiPhone
りんちゃんりんちゃん

Progressプロパティには1以上の値を設定することも可能だにゃ~。けど、1を設定しているのと変わらない表示になるにゃ~。

コードビハインドでProgressBarを設定してみる

りんちゃんりんちゃん

MainPage.xaml.csに以下のように記述してみてにゃ~。


Windows8.1AndroidiPhone
りんちゃんりんちゃん

プロパティが少なくて非常にシンプルなコントロールだにゃ~。

ProgressBarをn秒間掛けてm%までアニメーションさせるProgressToメソッド

かりまたかりまた

ProgressBarコントロールにはProgressToというメソッドがあります。これはn秒間かけてm%までプログレスバーをアニメーションさせるメソッドなのですが、とりあえずみてみましょう。

Windows8.1AndroidiPhone
かりまたかりまた

上から順に、以下の様に動いています。

  1. 0%から50%まで5秒掛けてアニメーション
  2. 20%から100%まで2秒掛けてアニメーション
  3. 50%から0%まで3.5秒掛けてアニメーション

かりまたかりまた

以下の様にコーディングしています。MainPage.xamlには以下の様に記述してください。

アニメーションのさせ方について

りんちゃんりんちゃん

ProgressToメソッドの第3引数でアニメーションのさせ方をしているのにゃ~。最後に、このアニメーションの違いを実際に試してみて〆ることにするのにゃ~。

りんちゃんりんちゃん

Xamlは以下の通りにゃ~。


りんちゃんりんちゃん

Easingのアニメーションについては以下のサイトを参考にすると分かりやすいのにゃ~。

Easing Function 早見表