Silverlight-data-binding
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に正常にバインドされたことをすぐに確認できます。
- 表示*ボタンを押すと、メッセージボックスに名前と年齢が表示されます。
上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。
ここで、*表示*ボタンをクリックすると、同じメッセージが再び表示されます。
これは、 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>このアプリケーションを再度実行すると、同じ出力が表示されます。
上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。
ここで、*表示*ボタンをクリックすると、更新されたメッセージが表示されます。
