[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の値が変更されます。

コメントを残す

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

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