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

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

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

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

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

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

一方向のデータバインディングの簡単な例を見てみましょう。次のXAMLコードは、いくつかのプロパティを持つ4つのテキストブロックを作成します。

<Window x:Class = "DataBindingOneWay.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/>
         </StackPanel>

         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Title}"/>
         </StackPanel>
      </StackPanel>
   </Grid>

</Window>

2つのテキストブロックのテキストプロパティは「名前」と「タイトル」に静的に設定され、他の2つのテキストブロックのテキストプロパティは、以下に示すEmployeeクラスのクラス変数である「名前」と「タイトル」にバインドされます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; }
      public string Title { get; set; }

      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Ali Ahmed", Title = "Developer"
         };
         return emp;
      }
   }
}

このクラスには、 Name と Title の2つの変数と、従業員オブジェクトを返すEmployeeオブジェクトが初期化される静的メソッドが1つあります。したがって、プロパティ、名前、およびタイトルにバインドしていますが、そのプロパティが属するオブジェクトを選択していません。最も簡単な方法は、次のC＃コードでバインドしているプロパティを持つDataContextにオブジェクトを割り当てることです-

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

namespace DataBindingOneWay {
  ///<summary>
     ///Interaction logic for MainWindow.xaml
  ///</summary>

   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent();
         DataContext = Employee.GetEmployee();
      }
   }
}

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

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

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

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

例

3つのコンボボックスアイテムを持つ1つのコンボボックスといくつかのプロパティを持つ1つのテキストボックスが作成される次の例を見てみましょう。この例では、標準のデータソースはありませんが、UI要素は他のUI要素にバインドされています。

<Window x:Class = "XAMLTestBinding.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100">
         <ComboBoxItem Content = "Green"/>
         <ComboBoxItem Content = "Yellow" IsSelected = "True"/>
         <ComboBoxItem Content = "Orange"/>
      </ComboBox>

      <TextBox  Name = "textBox" Margin = "50"
         Width = "100" Height = "23" VerticalAlignment = "Top"
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content,
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}"
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}">
      </TextBox>
   </StackPanel>

</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます。ユーザーがコンボボックスからアイテムを選択すると、それに応じてテキストボックスのテキストと背景色が更新されます。

双方向バインディング

同様に、ユーザーがテキストボックスに有効な色の名前を入力すると、コンボボックスとテキストボックスの背景色も更新されます。

双方向バインディング2

Xaml-data-binding

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

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

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

例

目次