Silverlight-データバインディング

データバインディングは、Silverlightアプリケーションのメカニズムであり、Windowsランタイムアプリが部分クラスを使用してデータを表示および操作するシンプルで簡単な方法を提供します。データの管理は、このメカニズムでデータが表示される方法から完全に分離されています。データバインディングにより、UI要素とユーザーインターフェイス上のデータオブジェクト間のデータフローが可能になります。バインディングが確立され、データまたはビジネスモデルが変更されると、更新がUI要素に自動的に反映され、その逆も同様です。標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。

データバインディングには、次の2つのタイプがあります-

一方向のデータバインディング
双方向のデータバインディング

一方向データバインディング

一方向のデータバインディングでは、データはソース（データを保持するオブジェクト）からターゲット（データを表示するオブジェクト）にバインドされます。

一方向のデータバインディングの簡単な例を見てみましょう。

以下は、2つのラベル、2つのテキストボックス、1つのボタンがいくつかのプロパティで作成されたXAMLコードです。

<UserControl x:Class = "DataBinding.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "Auto"/>
         <ColumnDefinition Width = "200"/>
      </Grid.ColumnDefinitions>

      <TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock>
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
         Text = "{Binding Name, Mode=OneWay}"/>

      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock>

      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin="2"
         Text = "{Binding Age, Mode = OneWay}"/>

      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
         <Button Content = "_Show..." Click = "Button_Click"/>
      </StackPanel>

   </Grid>

</UserControl>

私たちは次のことを観察します-

両方のテキストボックスのテキストプロパティは、「 Name 」および「 Age 」にバインドされます。これらは、以下に示す Person クラスのクラス変数です。
Person クラスには、 Name と Age という2つの変数のみがあり、そのオブジェクトは MainPage クラスで初期化されます。
XAMLコードでは、プロパティ Name およびAgeにバインドしていますが、どのプロパティがオブジェクトに属するかは選択していません。
簡単な方法は、以下に示すように、 MainPage コンストラクターのC＃コードでプロパティをバインドしている DataContext にオブジェクトを割り当てることです。

using System.Windows;
using System.Windows.Controls;

namespace DataBinding {

   public partial class MainPage : UserControl {
      Person person = new Person { Name = "Salman", Age = 26 };

      public MainPage() {
         InitializeComponent();
         this.DataContext = person;
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age;
         MessageBox.Show(message);
      }
   }

   public class Person {
      private string nameValue;

      public string Name {
         get { return nameValue; }
         set { nameValue = value; }
      }

      private double ageValue;

      public double Age {
         get { return ageValue; }

         set {
            if (value != ageValue) {
               ageValue = value;
            }
         }
      }
   }
}

このアプリケーションを実行すると、Webページで、そのPersonオブジェクトのNameとAgeに正常にバインドされたことをすぐに確認できます。

Object to DataContext

表示*ボタンを押すと、メッセージボックスに名前と年齢が表示されます。

メッセージの表示

上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。

名前と年齢の変更

ここで、*表示*ボタンをクリックすると、同じメッセージが再び表示されます。

メッセージの表示

これは、 data-binding モードがXAMLコードでonewayに設定されているためです。更新されたメッセージを表示するには、双方向のデータバインディングを理解する必要があります。

双方向のデータバインディング

双方向バインディング*では、ユーザーはユーザーインターフェイスを介してデータを変更し、そのデータをソースで更新できます。ユーザーがビューを見ているときにソースが変更された場合、ビューを更新する必要があります。

同じ例を見てみましょうが、以下に示すように、XAMLコードでバインディングモードを一方向から双方向に変更するだけです。

<UserControl x:Class = "DataBinding.MainPage"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "Auto"/>
         <ColumnDefinition Width = "200"/>
      </Grid.ColumnDefinitions>

      <TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock>

      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
         Text = "{Binding Name, Mode=TwoWay}"/>

      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>

      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2"
         Text = "{Binding Age, Mode = TwoWay}"/>

      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
         <Button Content = "_Show..." Click = "Button_Click"/>
      </StackPanel>

   </Grid>

</UserControl>

このアプリケーションを再度実行すると、同じ出力が表示されます。

Object to DataContext

上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。

名前と年齢の変更

ここで、*表示*ボタンをクリックすると、更新されたメッセージが表示されます。

名前と年齢の値を変更

Silverlight-data-binding

Silverlight-データバインディング

一方向データバインディング

双方向のデータバインディング