データバインディングとは、ユーザーインターフェイスのプロパティと他のコントロールやクラスのプロパティを関連づける処理のことです。データバインディングは主に、データベースや Web サービスなどから取得したリソースを、クライアント上のコントロールに表示する場合などに利用します。
データバインディングを使えば、「このコントロールには○○というデータ元の××というプロパティーを表示させる」という設定をしておくだけで、実際の値の割り当て（＝バインディング）は自動的に行われます。
バインディングを行う場合は XAML でユーザーインターフェイスを定義する際に、{Binding …} のような特殊な構文を使用します。例えば、TextBlock コントロールの Text プロパティにバインディングで値を設定する場合は下のように記述します。
例：XAML コード
<TextBlock Text="{Binding Source={StaticResource SampleDataSource}, Path=FirstName}” /
Silverlight のデータバインディングには次の 3 つのモードがあります。
| モード | 概要 |
|---|---|
| OneTime | バインドされた時点のオブジェクトの値がコントロールに反映される。以後、オブジェクトの値が更新されても、コントロールは更新されない。 |
| OneWay | バインドされた時点のオブジェクトの値がコントロールに反映され、以後、オブジェクトの値が更新されるたびに、コントロールが更新される。 |
| TwoWay | OneWay に加え、コントロールの値が更新された場合にも、オブジェクトの値に反映される。 |
通常は OneWay バインドを使用します。TextBox、Slider などユーザーからの入力があるコントロールへのバインドは TwoWay バインドを利用して入力によってデータを更新することができます。アプリの使用中にデータの変更を受け取る必要が無い場合は OneTime バインドを使用すればデータの更新が発生しないので高速に動作します。
複数のコントロールが同一のデータソースを参照している場合、共通の親 (パネル等) の DataContext プロパティにデータソースを参照させれば、データはすべての子に継承されますので、参照が一回で済みます。
Blend を使ってデータバインディングする場合の例
TextBlock を選択します。プロパティパネル Text プロパティの右横にある詳細プロパティをクリックしてメニューを表示します。データバインドの作成画面が表示されます。「データフィールド」タブを選択、左側に表示されるデータソースを選択し、右側のフィールドからリンクするデータ項目を選択します。
バインドの方向を変更する場合は、「詳細のプロパティ表示」をクリックし、詳細画面を表示してください。TextBlock にバインドしているため、「OneWay」に設定されています。値を入力できる TextBox にバインドしている場合は TwoWay も選択できます。
このように表示される一覧の中から項目を選択するだけで以下のような XAML が自動的に作成されます。
LayoutRoot に DataContext が設定され、TextBlock の Text プロパティには「FirstName」の項目が Bind されています。
Blend4 にはプロトタイプ用にサンプルデータを簡単に作成する機能がついています。C# の知識がない人でも簡単にサンプルデータを作成し、データバインドすることが出来ます。デザイン時にサンプルデータを表示することによって、実行時のレイアウトを確認しながら作業をすすめることが出来ます。
サンプルデータの作成には 3 種類の方法が用意されています。
1) 新しくサンプルデータを作成 : 何もサンプルデータがないところから作成してくれます。
2) XMLからのインポート : サンプルデータ用に作成された XML ファイルを読み込みます。
3) クラスからのインポート : サンプルデータ用に作成されたクラスファイルを読み込みます。
この自習書では 1) と 2) の方法について説明を行います。
下記の内容で新規プロジェクトを作成します。
| プロジェクトの種類 | Silverlight |
|---|---|
| Silverlight アプリケーション ＋ Web サイト | |
| 名前 | SampleData |
| 場所 | C:\XXXX \Work\ |
| 言語 | Visual C# |
| バージョン | 4.0 |
画面右上にプロパティパネルが表示されていますが、「プロパティ」の一番右端にある「データ」を選択してください。データを扱うパネルが表示されます。このデータパネルの右上にある「サンプルデータの作成」ボタンをクリックして出てきたメニューから「新しいサンプルデータ」を選択します。
続いてデータソースを選択するためのダイアログが表示されます。今回は既定の設定のままで OK です。
【設定内容】
■データソース名 : SampleDataSource
■定義先 : プロジェクト
■アプリケーションの実行中にサンプルデータを有効化にチェックをしてください。
これで基本的なサンプルデータが自動的に作成されました。どんなサンプルデータが出来たのか確認してみます。データパネルを見てください。プロジェクトの下に新しく SampleDataSource が追加されています。
■SampleDataSource の内容
SampleDataSource に 2 つの項目を持つコレクションが作成されています。
・Property1(文字列型) 
・Property2(ブール型) 
項目の名前はデータパネル上で変更することが出来ます。
Property1 を Name、Property2 を Age に変更してみましょう。
Property1 をダブルクリックする、もしくは選択した状態でもう一度クリックすると編集可能状態の青い背景になります。
各項目名の右側にある型を表すマークをクリックすると、設定変更をすることができます。
型は、「文字列」「数値」「ブール型」「イメージ」から選択できます。
名前を変更して Age になったブール型の項目を数値に変更します。
型を変更すると、設定できる項目も変わってきます。
数値の場合、作成する数値型のサンプルデータの長さ （桁数） を指定することが出来ます。今回は 2 桁の数値を設定します。これで 2 桁のランダムな数値を作成してくれます。
文字列を選択した場合はさらに、文字列の形式（名前、URL、会社名、時刻、日付、住所、メールアドレスなど）や文字数、長さなどを設定することが出来ます。（※ただし作成されるデータは英語になります）
項目を追加したい場合は「＋」マークの「シンプル プロパティの追加」を押して、項目を追加してください。
「＋」マークの隣の「▼」マークをクリックすると、「シンプル プロパティ」以外のプロパティを選択して追加出来ます。必要なサンプルデータに合わせて項目を設定してください。
つづいて作成されたサンプルデータの内容を確認します。
Collection の隣にある 
「サンプル値の編集」マークをクリックするとサンプルデータが表示されます。
左下にある「記録の数」にサンプルデータの件数が表示されています。今回は 10 件のデータが作成されました。この設定によってサンプルデータの件数が変更されます。
作成されたサンプルデータはこの画面で直接修正することが出来ます。
次に XML でサンプルデータを作成し、そのファイルをインポートして使用する場合について説明します。
下記の内容で新規プロジェクトを作成します。
| プロジェクトの種類 | Silverlight |
|---|---|
| Silverlight アプリケーション ＋ Web サイト | |
| 名前 | BindingListBox |
| 場所 | C:\XXXX \Work\ |
| 言語 | Visual C# |
| バージョン | 4.0 |
＜サンプルデータ＞
・SelfStudy\ SampleData \RestaurantData.xml (データファイル)
・SelfStudy\ SampleData \SampleImage\ 以下の png ファイル (使用する画像ファイル)
データパネルの右上の「サンプルデータの作成」ボタンをクリックして「XML からサンプルデータのインポート」を選択します。
データソースを選択するためのダイアログが表示されます。下記のように設定してください。
【設定内容】
■データソース名 : RestaurantData
■XMLファイル : SelfStudy\SampleData\RestaurantData.xml
■定義先 : プロジェクト
■アプリケーションの実行中にサンプルデータを有効化にチェックをしてください。
これで自動的に XML データファイル内のデータがサンプルデータをして取り込まれます。
読み込まれたデータの構成
XML(RestaurantData.xml) 構成
<?xml version="1.0" encoding="Shift-Jis" ?>
<ShopData>
<Detail>
<ShopName>店名</ShopName>
<Address>住所</Address>
<ImageSource>画像ファイル名</ImageSource>
</Detail>
・・・同じようにお店の詳細情報が繰り返されます・・・
</ShopData>
XML を読み込んだ際に、項目の型を自動的に判断して設定しています。設定が違う場合は、データパネル読み込んだデータ項目名の右端にある 
マークを選択して修正してください。
今回の設定は以下の通りです。
ShopName：文字列 /
Address：文字列 /
ImageSource：イメージ /
XML をインポートした際に、自動的に ImageSource に指定している画像ファイルも取り込みを行ってくれます。
プロジェクトパネルをみると XML ファイルと関連する画像ファイルなどが取り込まれているのが確認できます。
SampleData フォルダ以下に新しく RestaurantData フォルダが作成され、RestaurantData_Files 以下に画像ファイルが保存されています。
データは RestaurantData.xaml に保存されています。
これでサンプルデータの準備は終了です。
Bサンプルデータを表示するためにアートボード上に DataGrid コントロールを配置します。配置した DataGrid コントロールに対してデータパネルの「DetailCollection」をドラッグ & ドロップするとデータバインドすることが出来ます。
ツールパネルのアセットから DataGrid を選択し、アートボード上に適当な大きさで配置してください。
サンプルデータを DataGrid コントロールにドラッグ＆ドロップするだけで、自動的にデータバインドされ、サンプルデータが DataGrid に表示されます。
XAML を見てみましょう。データバインドの記述部分をハイライト表示させています。
このように DataGrid、ListBox、ComboBox などのコントロールにドラッグ＆ドロップすることで簡単にデータバインドを設定することが出来ます。
次にアートボード上にはコントロールを配置しない状態でドラッグ & ドロップします。先ほど配置した DataGrid コントロールはいったん削除してアートボード上には何もない状態にしてください。
データパネルの「DetailCollection」をドラッグし、アートボード上にマウスを移動させると「ListBox を作成してデータバインドする」かどうかのメッセージが表示されます。このままドロップするとその場所に自動的にデータバインドされた ListBox が作成されます。
ListBox にデータバインドしたい場合はこのような方法もあります。
自動的に作成された ListBox の XAML の内容を確認してみます。
ルートの Grid の DataContext に「RestaurantDataData」が読み込まれています。
ListBox の ItemsSource には「DetailCollection」がバインドされています。
もうひとつ ListBox に設定されているのが「ItemTemplate」です。このテンプレートはリストボックスの ItemsSource に設定したデータをどのように表示するかを設定します。このようなテンプレートを DataTemplate と呼びます。
ItemTemplate はリソースとして XAML の最初に定義されている「DetailTemplate」を指定しています。
では、DetailTemplate の内容を見てみます。
スタックパネル内に DetailCollection に設定されている各項目 (Address、ImageSource、ShopName） が文字列なら TextBlock、イメージの場合はイメージコントロールとサンプルデータの型に合わせたコントロールで配置されています。そして、それぞれにデータがバインドされています。
ListBox の ItemTemplate に割り当てられている DataTemplate ですが、Button で扱った ControlTemplate とどう違うのでしょうか？
どちらもテンプレート (ひな型) には違いないのですが、ControlTemplate はコントロールのためのテンプレートで、インタラクティブアクション性の高いものを扱い、DataTemplate はデータを振り分けるための静的なテンプレートという使い分けができます。
Silverlight 3 から、Element-to-Element バインディング (以降 エレメントバインディング） が使えるようになりました。
データバインディングはコントロールとデータを結び付けますが、エレメントバインディングはコントロールとコントロールを結び付けます。
このエレメントバインディングを使用して ListBox の選択内容を、別のコントロールに表示する仕組みを作ります。エレメントバインディングする表示用のコントロールには ContentControl を使用します。
この ContentControl は、コントロールのベースとなるシンプルなコントロールで、クリックなどのイベントが無いものです。
LayoutRoot（Grid） を左右に分割して、左に「ListBox」、右に「ContentControl」を配置します。
オブジェクトとタイムラインで LayoutRoot 選択します。アートボード上で ListBox の幅に合わせて Grid を分割します。
アセットから ContentControl を選択し、LayoutRoot の右側のカラムに ContentControl を配置します。
配置した ContentControl の Margin プロパティをリセットし、プロパティに固定のローカル値が設定されていない状態にしてください。これで右側のカラムいっぱいに表示されるようになります。
XAML を見てみると以下のようになります。
ContentControl のコンテンツを表示するために必要な ContentTemplate を割り当てます。確認するために ListBox の ItemTemplate で使用している「DetailTemplate」を流用してみます。
オブジェクトとタイムラインから ContentControl を選択します。プロパティパネル「その他」の「ContentTemplate」の詳細オプションから、「ローカルリソース＞DetailTemplate」を選択します。
ContentControl を選択した状態で、プロパティパネル「共通プロパティ」の「Content」の詳細プロパティオプションをクリックしてメニューを開きます。エレメントバインドするには 2 つの方法があります。
① データバインドを選択した場合
「データバインドの作成」ウインドウが開きます。真ん中にある｢要素プロパティ｣タブを選択します。左側の「シーン要素」で ListBox を選択すると右側に ListBox のプロパティ一の覧が表示されるので、「SelectedItem」を選択します。
② 要素のプロパティのバインドを選択した場合
特に何も画面は開きません。エレメントバインド先のコントロールの指定は、アートボード上に配置されたコントロールをマウスでクリックすることで選択します。 マウスをアートボード上に移動させると、マウスポインタの形状が変わり、マウスが Hover しているコントロールの情報が表示されます。
ListBox コントロール上でクリックして選択をします。
エレメントバインド先のコントロールが選択されると、そのコントロールのどのプロパティとバインドするのか指定するための画面が開きます。SelectedItem プロパティを探して選択してください。
これでエレメントバインディングが設定できました。
ファンクション F5 で実行します。選択したアイテムが ContentControl に表示されるようになりました。
XAML の内容を確認してみます。
ContentControl の Content と ListBox の SelectedItem がバインドしている設定が確認できました。
ContentTemplate に ListBox で使用している「DetailTemplate」を使用しているので、表示が小さいままです。現在適用されている「DetailTemplate」を複製して編集します。 オブジェクトとタイムラインで ContentControl 右クリックして。「追加テンプレートの編集＞生成されたコンテンツの編集 （ContentTemplate） ＞コピーして編集」を選択します。
DataTemplate リソースの作成画面が出ますので、任意の名前をつけて「OK」ボタンをクリックします。今回はそのままの名前 （DataTemplate1） で構いません。
画面がテンプレート編集モードに切り替わります。
元のテンプレートでは項目が「Address」「ImageSource」「ShopName」という順で縦にならんでいましたが、これを「Image」「ShopName」「Adress」の順番に変更します。オブジェクトとタイムラインパネルを見てください。StackPanel の一番上にある TextBlock が「Adress」がバインドされるコントロールです。これをドラッグ & ドロップで一番下まで移動させます。ドロップ出来る場所に青いラインが表示されるのでそれを確認しながらドロップしてください。
場所はこれで変更できました。続いて画像の大きさや文字の大きさをプロパティで調整します。
【修正点】
■ImageSource（Image）
Width : 450
Height : 300
■ShopName（TextBlock）
FontSize : 24pt
■Address（TextBlock）
FontSize : 14pt
ファンクション F5 で実行してみてください。下図のようになれば完成です。
データバインディングとエレメントバインディングを使うとフォトギャラリーのようなものも簡単に作れます。
Expression Studio 4 Ultimate
Expression Blend は、Expression Studio Ultimate に含まれています。
60 日間の評価版を使用して、その使い勝手をお試しいただけます。
あったらいいな、が詰まってる MSDN Subscription
MSDN Subscription は、Expression Blend を含む(※1)新旧の開発ツールと環境をご利用いただけるたけでなく、テクニカルサポートなども活用いただける、開発者の皆様をトータルにサポートするサービスです。
※1 Expression Blend は、Visual Studio Premium with MSDN および Visual Studio Ultimate with MSDN でお使いいただけます。詳細はこちらをごらんください。
