[Silverlight][バインディング] コントロール間のデータバインディング

今回は、コントロール間でのデータバインディングについて見ていきます。

スライダーコントロールとプログレスバーを配置して、スライダーと連動してプログレスバーの値が変わるようにします。


1.コントロールの配置

まずは、スライダーコントロールとプログレスバーを以下のように配置します。

Binding1_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.実行してみる

以上で設定は終わりなので、実行をしてみます。

スライダーコントロールのつまみを動かすと、連動してプログレスバーの値が変化することを確認できます。

連動の確認

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください