[Silverlight][バインディング] データバインディングのモードを理解する

今回はデータバインディングのモードについて説明します。

まずは、Silverlightアプリケーションを作成し、MainPage.xamlに NumericUpDownコントロールと Sliderコントロールを貼り付けます。
NumericUpDownコントロールはSilverlight Toolkitに含まれるコントロールです。
Silverlight Toolkitがインストr-ルされていない場合は、前回の記事を参照ください。

メインページのデザイン

モードについて
データバインディングのモードをを設定すると、一方のコントロールの値を変更した時に、もう一方のコントロールの値を連動して更新することができるようになります。
今回の例では、NumeriUpDown と SliderのValueプロパティを連動させます。

モードは以下のように3種類あります。

モード値 説明
 OneTime ソースの値が1度だけターゲットに対して反映されます
 OneWay ソースの値が変更されると、ターゲット側の値も変更されます
 TwoWay ソースの値が変更されると、ターゲット側の値も変更されます。また、ターゲットの値が変更されるとソース側の値が変更されます

OneTimeの検証

OneTimeの検証をするために、XAMLを以下のように編集します。

<toolkit:NumericUpDown x:Name="NumericUpDown1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="114" Value="50"/>
<Slider x:Name="Slider1" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top" Width="252"
        Minimum="0" Maximum="100" Value="{Binding ElementName=NumericUpDown1, Path=Value, Mode=OwoTime}"/>

NumericUpDown では 初期値として Valueプロパティに「50」を設定しています。
Sliderコントロールでは、ValueプロパティにNumericUpDownのValueプロパティをバインディングし、ModeプロパティにOnwWayを指定しています。

実行すると、NumericUpDownコントロールには「50」が表示され、Sliderコントロールのつまみは中心の50の位置に表示されます。

モードがOneTimeのため、表示された移行、NumericUpDownの値を変更しても Sliderコントロールの値は変更されません
また、Sliderコントロールの値を変更してもNumericUpDownの値も変更されません。


OneWay

OneWayの検証をするために、XAMLを以下のように編集します。

<toolkit:NumericUpDown x:Name="NumericUpDown1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="114" Value="50"/>
<Slider x:Name="Slider1" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top" Width="252"
        Minimum="0" Maximum="100" Value="{Binding ElementName=NumericUpDown1, Path=Value, Mode=OneWay}"/>

OneTimeのときとの違いは、Modeプロパティが「OneWay」となっている部分です。

実行すると、NumericUpDownコントロールには「50」が表示され、Sliderコントロールのつまみは中心の50の位置に表示されます。
NumericUpDownの値を変更すると、連動してSliderのつまみが移動します。
Sliderのつまみを移動してもNumericUpDownの値は変更されないことを確認しましょう。


TwoWay

TwoWayの検証をするために、XAMLを以下のように編集します。

<toolkit:NumericUpDown x:Name="NumericUpDown1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="114" Value="50"/>
<Slider x:Name="Slider1" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top" Width="252"
        Minimum="0" Maximum="100" Value="{Binding ElementName=NumericUpDown1, Path=Value, Mode=TwoWay}"/>

OneTIme, OneWayのときとの違いは、Modeプロパティが「TwoWay」となっている部分です。

実行すると、NumericUpDownコントロールには「50」が表示され、Sliderコントロールのつまみは中心の50の位置に表示されます。
NumericUpDownの値を変更すると、連動してSliderのつまみが移動します。
また、Sliderのつまみを移動すると、連動してNumericUpDownの値が変更されます。

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

前回はXAMLコードを編集してデータバインディングを設定しました。

今回は前回と同様のことをXAMLコードを編集せずにプロパティウィンドウから設定します。


1.コントロールの配置とプロパティの設定

前回と同様にプログレスバーコントロールとスライダーコントロールを配置し、

プログレスバーのプロパティ Minimum = 0, Maximum = 100

スライダーのプロパティ Minimum = 0, Maximum = 100

に設定します。


 2.バインディング設定

プログレスバーを選択して、プロパティウィンドウで Valueプロパティの右側にある□をクリックします。

すると、メニューが表示されるので「データバインディングの作成」を選択します。

データバインディングの作成

「[Progressbar].Value」のデータバインディングを作成」ダイアログが表示されます。

バインディングの設定

 

このダイアログでは、プログレスバーのValueプロパティにバインディングする項目を設定するためのものです。

バインドの種類では「ElementName」を選択します。

要素名では「Slider」を選択します。

パスでは「Value」を選択し、最後に[OK]ボタンをクリックします。

このことからもわかるように、プログレスバーのValueプロパティに、スライダーコントロールのValueをビンディングしたことになります。


3.実行して確認する

以上で設定は終わりです。

実行して確認してみましょう。

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

実行確認

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

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

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

連動の確認