XAMLファイルにてコントロールオブジェクトのプロパティを書き換えるときにまとめて書き換えたい場面がたくさんあります。
例えばリストの一要素に複数のコントロールを持たせてその要素上の文字や画像を配置したいと考えることあると思います。
その場合、普段はこの変数はコントロールの文字に設定や、別の変数を画像のURLとして渡すなどをプログラムで結びつけることになります。
このデータの結びつきをただデータの塊(クラス)を渡すだけで実現できたら楽なのに…と思う場面があると思います。
そのデータを一括で渡しそのデータの画像ならImageに結びつけ、文字列ならばTextBlockを直接結びつけソースコードを書かないでも実現することができる機能データバインディングがあります。
そこで今回はExpression Blendでデータバインディングを行う方法についてご紹介いたします。
データバインディングは下記の手順で行います。
- 結び付けたいデータクラスの作成
- データバインディング設定
- データを表示
詳しい内容は続きを御覧ください。
今回は下記のような1要素が名前と出席番号からなるListBoxの作成を例にご紹介します。
結び付けたいデータクラスの作成
まず結び付けたいデータクラスを記述します。
今回は名前と出席番号からなるListBoxのさくせいなので下記のようなクラスをMainPage.xaml.csのなかに記述します。
public class Student
{
public String name { set; get; }
public int number { set; get; }
}
nameを名前、numberを出席番号としたクラスを作成しました。
これらのデータバインディングを行なっていきます。
データバインディング設定
どのデータをどこのコントロールに表示するかを指定していきます。
まずはListBoxはどのクラスからデータを取得して使うかを指定します。
ListBoxをクリックすると下図のようなプロパティパネルの表示されItemsSourceという項目があります。
このItemsSourceとクラスをバインディングします。
右側の□をクリックすると下図のような項目が表示されデータバインドを選択します。
すると下図のようなダイアログが表示されデータフィールドタブを表示します。
ダイアログの下部にCLRオブジェクトの追加という項目をクリックすると下図のようなダイアログが表示されバインドしたいクラスを選択します。
今回はStudentというクラスをバインドするのでStudentを選択すると下図のように表示されデータソースをStudentDataSource、フィールドをStudentを選択します。
※たまに作成したクラスがリストに表示されない時があります。一度プロジェクトをリビルドすると表示されるようになることがありますので試してください。
これでクラスとListBoxのバインドが完了しました。
次にリストの要素に作ります。
下図のように追加テンプレートの編集→生成されたアイテムの編集→空のアイテム作成を選択します。
そうすると何もコントロールが置かれていないパネルが表示されます。
そのパネルの上にリスト表示したいコントロールを配置します。
今回は下図のように配置します。
左側の部分は出席番号、右側を名前として描画します。
そして左側の出席番号を表示するTextBlockを選択するとプロパティパネルが下図のようになります。
今度はTextBlock内のTextプロパティを変更したいのでText横の□をクリックしデータバインドを選択します。
そして今度はデータコンテキストタブ内のStudent内のnumberを選択します。
そして同様に右側のTextBlockにnameをバインドします。
これでExpressionBlendのデータバインディングの設定は完了です。
データを表示
最後にデータを実際に表示してみましょう。
データを追加するときはObservableCollectionクラスを使ってデータを作成します。
ObservableCollectionは追加や削除などのデータが変更された時に通知をもらうことができるコレクションです。
実際にコレクションにデータを入れてリストにデータを入れてみると下記のようになります。
ObservableCollection<Student> students = new ObservableCollection<Student>
{
new Student { name = "muchiki", number = 7},
new Student { name = "test", number = 8}
};
StudentList.DataContext = students;
ObservableCollectionのコンテナはStudentに設定しデータを作って入れます。
そしてStudentListのDataContextプロパティに入れています。
DataContextにObservableCollectionを入れるとデータバインディングで結びつけた値を自動的にデータを当てはめてくれます。
そのため上記までの手順を実装すると下図のようになります。
コレクションに2つの要素を入れているので２つだけリストが表示されました。