今回は、コントロール間でのデータバインディングについて見ていきます。
スライダーコントロールとプログレスバーを配置して、スライダーと連動してプログレスバーの値が変わるようにします。
1.コントロールの配置
まずは、スライダーコントロールとプログレスバーを以下のように配置します。
2.プロパティの設定
プログレスバーは一番左側を0、一番右側が100になるようにプロパティを設定します。
Minimum = 0, Maximum = 100 とします。
スライダーコントロールは、プログレスバーに合わせて一番左側を0、一番右側が100になるようにプロパティを設定します。
こちらもMinimum = 0, Maximum = 100 とします。
3.バインディング
スライダーのつまみを動かしたときに、プログレスバーの値が連動するようにします。
このため、スライダーの値と連動するのはプログレスバーのValueプロパティとなります。
わかりやすくするために、プログレスバーのValueプロパティ部分のみを抜き出したXAMLコードを以下に示します。
<ProgressBar Value="{Binding Path=Value, ElementName=slider}" />
ProgressBarのValue属性に注目してください。
これはマークアップ拡張構文といい、{ と } を使用して、通常のプロパティの設定と区別されています。各プロパティは プロパティ名 = 値 の形式で記述し、カンマで区切って複数指定することが可能です。
上記のXAMLの例では、ElementNameが値の変更元のコントロール名を指しています。要するにスライダーコントロールに付けられた名称です。もう一つのPathはプログレスバーコントロールにスライダーコントロールの何の値を連結するかを意味します。「Value」としているので、スライダーコントロールValueプロパティが、プログレスバーのValueに結びつけられることになります。
4.実行してみる
以上で設定は終わりなので、実行をしてみます。
スライダーコントロールのつまみを動かすと、連動してプログレスバーの値が変化することを確認できます。
コメント