データ バインディング コントロール

データ バインディングは、アプリのユーザー インターフェイスをアプリのデータ クラスにリンクします。

iOS アプリの開発でキー値監視 (KVO) を使った経験があれば、データ バインディングについて多少身近に感じられると思われます。

最も単純な場合には、データ バインディングを使って 2 つの XAML コントロールをリンクし、それらのコントロールが自動的に更新されるようにすることができます。例として、テキスト ブロックを自動的に現在の値で更新するスライダー コントロールを宣言する XAML を次に示します。


 	<Slider x:Name="mySlider" Width="100"/>
        <TextBlock Text="{Binding Value, ElementName=mySlider}" VerticalAlignment="Center" HorizontalAlignment="Center"/>


ここでは、TextBlock の Text プロパティ (ターゲット) が Binding という特別な項目を使って設定され、データの提供元となるコントロールの名前 (ソース) と、そのコントロールの固有のプロパティが指定されています。この場合は、スライダーに表示される現在の数値を示す Value プロパティです。

このような種類のデータ バインディングは、一方向のバインドと呼ばれ、ソースからターゲットへの一方向にデータが渡されます。データが両方の方向に渡される双方向という形式のバインドもあります。

簡単な例として、次のコードでは、TextBlock の代わりに TextBox (手動で入力された値を取得するテキスト コントロール) を使っています。


	<Slider x:Name="mySlider" Width="100"/>
        <TextBox  Text="{Binding Value, ElementName=mySlider, Mode=TwoWay}" HorizontalAlignment="Left"  VerticalAlignment="Top"/>


前と同様に、スライダーを調整するとテキスト ボックス内のテキストが変化します。ただし今度は、テキスト ボックスに値を入力するとスライダー コントロールの状態も変化します。

バインドの構文について詳しくは、「Binding マークアップ拡張 (C#/VB/C++ と XAML を使った Windows ストア アプリ)」をご覧ください。

バインドのキーワードを手動で入力する代わりに、[ソリューション エクスプローラー] ビューでテキスト ボックスを選択し、[テキスト] プロパティの横にあるカラー ボックスをクリックして [データ バインディングの作成] を選択することもできます。

コントロール間にこのようなリンクをコードなしで作成できるのは便利ですが、データ バインディングはコレクション コントロールと組み合わせて使うことでその真価を発揮します。

データ バインディングとコレクション コントロール

特定のインターフェイスを実装する C# クラスに XAML コントロールをデータ バインディングすることもできますが、データにコントロールをリンクする最も簡単な方法は、ObservableCollection オブジェクトを利用することです。これはデータを格納する配列オブジェクトですが、バインドされた XAML コントロールとの通信もすべて処理します。実際、ObservableCollection オブジェクトを XAML コレクション コントロール (ListView など) にリンクした後は、新しいデータを追加または削除するとコントロールが自動的に更新されます。

次に単純な例を示します。最初に、次の XAML で ListView を宣言します。


<ListView x:Name="ListOfPlanets" Height="100" Width="100"/>

次に、ObservableCollection を宣言し、それにデータを格納して XAML コントロールにバインドする C# のコードを示します。


            // Add: using System.Collections.ObjectModel;
           ObservableCollection<string> planets = new ObservableCollection<string>();

            planets.Add("Mercury");
            planets.Add("Venus");
            planets.Add("Earth");

            ListOfPlanets.ItemsSource = planets;

このコードは、ListView に自動的に文字列を格納して表示します。また、Add または Remove を使って一覧を変更した場合には、コントロールが自動的に更新されます。ObservableCollection は汎用型であることに注意してください。作成するときに、格納するデータ型を指定する必要があります。

コレクション コントロールは優れた柔軟性を備えており、データ テンプレートを使ってデータの正しい形式を定義できます。たとえば、文字列やイメージを表示し、StackPanels または Grids を使ってコレクション コントロール内でレイアウトを定義することができます。バインドとデータ テンプレートについて詳しくは、「クイック スタート: コントロールへのデータ バインディング」をご覧ください。

関連トピック

iOS 開発者のためのトピック
iOS 開発者向けリソース
iOS 開発者のための Windows 8 のコントロール
iOS 開発者のための Windows 8 のクックブック
データ バインディングのトピック
データ バインディングの概要 (C#/VB/C++ と XAML を使った Windows ストア アプリ)
パート 5: ブログ リーダーを作成する (C#/VB と XAML を使った Windows ストア アプリ)
階層データにバインドし、マスター/詳細ビューを作る方法 (C#/VB/C++ と XAML を使った Windows ストア アプリ)

 

 

表示:
© 2015 Microsoft