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

データバインディングは、Windowsランタイムアプリがデータを表示および操作するためのシンプルで簡単な方法を提供するWPFアプリケーションのメカニズムです。このメカニズムでは、データの管理はデータの方法から完全に分離されています。

データバインディングにより、ユーザーインターフェイス上のUI要素とデータオブジェクト間のデータフローが可能になります。バインディングが確立され、データまたはビジネスモデルが変更されると、更新が自動的にUI要素に反映され、その逆も同様です。標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。

データバインディングには、*片方向データバインディング*と*双方向データバインディング*の2種類があります。

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

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

一方向のデータバインディングを詳細に理解するために簡単な例を見てみましょう。まず、 WPFDataBinding という名前の新しいWPFプロジェクトを作成します。
次のXAMLコードは、2つのラベル、2つのテキストボックス、および1つのボタンを作成し、それらをいくつかのプロパティで初期化します。

<Window x:Class = "WPFDataBinding.MainWindow"
   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"
   xmlns:local = "clr-namespace:WPFDataBinding"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>

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

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

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

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

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

      <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>
</Window>

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

using System.Windows;
namespace WPFDataBinding {

   public partial class MainWindow : Window {

      Person person = new Person { Name = "Salman", Age = 26 };

      public MainWindow() {
         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;
            }
         }
      }

   }
}

このアプリケーションを実行してみましょう。MainWindowで、PersonオブジェクトのNameとAgeに正常にバインドされていることがすぐにわかります。

DataBindingの出力

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

表示ボタンが押されたとき

ダイアログボックスで名前と年齢を変更しましょう。

DataBindingで行われた変更

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

同じメッセージを表示

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

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

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

同じ例を取り上げますが、ここでは、XAMLコードでバインディングモードを一方向から双方向に変更します。

<Window x:Class = "WPFDataBinding.MainWindow"
   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"
   xmlns:local = "clr-namespace:WPFDataBinding"
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>

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

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

      <Label Name = "nameLabel" Margin = "2">_Name:</Label>
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
         Text = "{Binding Name, Mode = TwoWay}"/>
      <Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label>
      <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>

</Window>

このアプリケーションを再度実行しましょう。

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

それは同じ出力を生成します-

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

名前と年齢の値を変更しましょう-

双方向の変更

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

更新された出力

概念をよりよく理解するために、上記のコードを両方のケースで実行することをお勧めします。

Wpf-data-binding

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

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

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