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

Silverlight

2014.10.072014.10.11

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

まずは、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コントロールには「５０」が表示され、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コントロールには「５０」が表示され、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コントロールには「５０」が表示され、Sliderコントロールのつまみは中心の50の位置に表示されます。
NumericUpDownの値を変更すると、連動してSliderのつまみが移動します。
また、Sliderのつまみを移動すると、連動してNumericUpDownの値が変更されます。

Please follow and like us: