何か重たい処理をしている際にユーザにストレスをかけないように今、どこまで進捗が進んでいるのかを視覚的に表してくれるコントロールがあります。それがProgressBarコントロールです。
今回はこのProgressBarコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。
ProgressBarの使い方
かりまた使い方は簡単で、以下のようにXamlに記述するのみです。
実際にどう動くのか？
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
かりまたプロパティを設定しないでProgressBarコントロールを配置するとこれらのように表示されます。コントロールの表示自体はされますが、当たり前のように何も動きません。
ProgressBarのPublicプロパティ一覧
ProgressBarのプロパティをXamlで適用してみる
りんちゃんMainPage.xamlに以下のように記述してみてにゃ～。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
りんちゃんProgressプロパティには1以上の値を設定することも可能だにゃ～。けど、1を設定しているのと変わらない表示になるにゃ～。
コードビハインドでProgressBarを設定してみる
りんちゃんMainPage.xaml.csに以下のように記述してみてにゃ～。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
りんちゃんプロパティが少なくて非常にシンプルなコントロールだにゃ～。
ProgressBarをn秒間掛けてm%までアニメーションさせるProgressToメソッド
かりまたProgressBarコントロールにはProgressToというメソッドがあります。これはn秒間かけてm%までプログレスバーをアニメーションさせるメソッドなのですが、とりあえずみてみましょう。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
かりまた上から順に、以下の様に動いています。
- 0%から50%まで5秒掛けてアニメーション
- 20%から100%まで2秒掛けてアニメーション
- 50%から0%まで3.5秒掛けてアニメーション
かりまた以下の様にコーディングしています。MainPage.xamlには以下の様に記述してください。
アニメーションのさせ方について
りんちゃんProgressToメソッドの第3引数でアニメーションのさせ方をしているのにゃ～。最後に、このアニメーションの違いを実際に試してみて〆ることにするのにゃ～。
りんちゃんXamlは以下の通りにゃ～。
りんちゃんEasingのアニメーションについては以下のサイトを参考にすると分かりやすいのにゃ～。
