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 クラスには、2つの変数しかありません Name そして Age、およびそのオブジェクトはで初期化されます MainPage クラス。

• XAMLコードでは、プロパティにバインドしています Name およびAgeですが、オブジェクトに属するプロパティは選択していません。

• 簡単な方法は、オブジェクトをに割り当てることです DataContext そのプロパティをC＃コードでバインドしています MainPage 以下に示すコンストラクタ。

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; 
            } 
         } 
      } 
   } 
}

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

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

変更しましょう Name そして Age 上記のダイアログボックスで。

さて、あなたがクリックすると Show ボタンを押すと、同じメッセージが再度表示されます。

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

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

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

同じ例を見てみましょうが、以下に示すように、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>

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

変更しましょう Name そして Age 上記のダイアログボックスで。

さて、あなたがクリックすると Show ボタンをクリックすると、更新されたメッセージが表示されます。