スライダー・プログレスバーとテキストブロックの使い方

UWPでスライダー・プログレスバーとテキストブロックを使う方法について説明します。スライダーでは、スライド形式で数値を指定することが可能です。プログレスバーは数値をバー形式で表示することができます。テキストブロックはテキストを表示するのに使用します。スライダーを動かしたらその数値をテキストブロックに表示しプログレスバーも同期するプログラムをつくります。

UI設計

はじめにツールボックスからSlider・ProgressBar・TextBlockを以下のようにドラッグアンドドロップで配置します。

それぞれ名前をsldr、progress、labelとします。

スライダー

スライダのレンジは以下の命令で実行できます。

Maximum
Minimum

値の取得と指定は

Value

を使用します。

とりあえず値を取得したいので、値が変化した際に動作するイベントを作ります。右下のプロパティから雷マークを押して、イベント一覧を表示します。そして、ValueChangedの欄をダブルクリックします。すると、スライダーの値が変化した際に実行されるメソッドが表示されます。その中に

sldr.Maximum = 100;
sldr.Minimum = 0;
double val = sldr.Value;

とコードを書きます。

プログレスバー

プログレスバーのレンジの指定は以下の通りです。

Value

値の指定は

 

です。スライダから得た値を以下のようにして指定します。

progress.Maximum = sldr.Maximum;
progress.Minimum = sldr.Minimum;
progress.Value = val;

テキストブロック

テキストブロックの表示と値の取得はTextメソッドを使用します。valの値を表示するには

label.Text = val.ToString();

とします。

 

 

以上のプログラムをまとめると以下のとおりになります。

private void sldr_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    sldr.Maximum = 100;
    sldr.Minimum = 0;
    double val = sldr.Value;
    progress.Maximum = sldr.Maximum;
    progress.Minimum = sldr.Minimum;
    progress.Value = val;
    label.Text = val.ToString();
}

実行すると

となり、スライダーの変化とともに表示が変わります。

著者:安井 真人(やすい まさと)