第1回　データバインドって何？

Blendを使うと、アニメーションや動画などを使ってビジュアル的に華やかなアプリケーションを作ることができます。それと同時に、機能的にも便利なアプリケーション（言い換えれば「本当にかっこいいアプリ」）は、豪華なプレゼンテーションと裏側の数値やテキストといったデータが密接に連携して成立しているものです。そこでLesson5では、データとビジュアル効果を結びつける「データバインド」を紹介しながら、動画に字幕を表示させるアプリケーションを作成します。

最近はYouTubeやニコニコ動画などの動画共有サイトが人気ですが、WPFを使えば、動画の再生に合わせてコメントを表示させるアプリケーションを簡単に作ることができます。このLessonでは、時間経過に合わせて字幕を表示する動画プレイヤーを作っていきます【図1】。

このアプリケーションを作るには、再生させる動画ファイルと、表示するコメントを書いたXMLファイルが必要となります。両ファイルを、この記事を読み進める前に以下からダウンロードしておいてください。

また、このアプリケーションを作るためにはBlendのほかにVisual Studioも必要になります。お手元にない場合は以下のサイトからVisual Studioをダウンロードし、インストールしておいてください（詳しくは「Lesson1第1回　WPF、Blendとは？」をご参照ください）。

Visual Studio 2005 Service Pack 1 Update for Windows Vista
http://www.microsoft.com/downloads/details.aspx?FamilyId=90E2942D-3AD1-4873-A2EE-4ACC0AACE5B6&displaylang=ja

データバインドは「情報と情報を結びつける機能」です。

情報と情報を結びつける機能といわれてもイメージがつきにくいかもしれません。データバインドを利用すると、例えば動画の再生時間をリアルタイムで表示させたり、動画に連動して字幕を表示させたりすることができる、というとイメージしやすいのではないでしょうか。

また、バインドさせるデータは必ずしもアプリケーションの内部にある必要はありません。XMLなどのデータファイルに書かれた内容を読み込んで、アプリケーション内に表示させることも可能です。

XMLデータはメモ帳などのテキストエディタでも更新することができるため、データバインドに使うデータをXML内に書いておくと、簡単に更新できるようになります。設定を変更する度に、わざわざアプリケーションを修正してビルドし直す必要がなくなります。

まず最初に、新しいプロジェクトを作成し、今回作成するアプリケーションに使う動画ファイルとXMLファイルをプロジェクトに追加します。

Blendを起動して、［新しいプロジェクト］を選択し、新規のプロジェクトを作成します。続いて、ダウンロードした動画ファイルとXMLファイルを、プロジェクトで使用するファイルとして登録します。

次に、ツールバーの［プロジェクト］から［既存のアイテムの追加］をクリックします。するとファイルの指定を促されるので、使用するXMLファイルを指定してください【図2】。

選択したファイルは［プロジェクト］パネルの［ファイル］に追加されます【図3】。同じようにして、動画ファイルも追加してください。

次に、追加したcomments.xmlをデータソースとして読み込みます。［プロジェクト］パネルにある［データ］から［+XML］ボタンをクリックしてください【図4】。

［+XML］をクリックするとXMLデータソースを指定するウィンドウが表示されます。［接続名］に「XMLDataSource」と書かれていることを確認したら、［XMLデータのURL］の欄の右にある［参照］をクリックし、comments.xmlを指定して［OK］ボタンをクリックします【図5】。

［OK］ボタンをクリックすると、［+XML］ボタンの下に［commentsDS］という項目が追加されます【図6】。この一覧は、このアプリケーションで使用するデータソースの一覧です。［commentsDS］の表示はcomments.xmlがデータソース（DS）として読み込まれたことを意味します。

これで、XMLファイルをアプリケーション内で使用する準備が整いました。

続いてデータソースの内容をLayoutRootグリッド上に表示させます。

まずは、ListBoxを作成し、データソースの中のある要素をListBoxの中に表示させます。［資産ライブラリ］から［ListBox］を選択し、LayoutRootグリッド内でドラッグします。するとドラッグしたところにListBoxが作成されます【図7】。

このListBoxには［CommentsList］という名前をつけます。［プロパティ］パネルの［名前］に「CommentsList」と入力してください【図8】。

次に、CommentsListを選択した状態で、［プロパティ］パネルの［共通プロパティ］内にある［ItemsSource］欄の右端にある小さな灰色の四角形をクリックします。するといくつかの選択肢が表示されるので、その中から［データバインド］を選択します【図9】。

［データバインド］を選択すると［データバインドの作成］ウィンドウが開きます【図10】。このウィンドウでは選択したオブジェクト（今回はCommentsList）と連動させるデータソースを指定します。

［データフィールド］タブをクリックすると、左側には参照するデータソース、右側には参照データソースの要素の一覧が表示されます。左側の欄で［commentsDS］を指定し、右側の欄に表示された一覧から［comment(配列)］を指定します。

次に、ウィンドウ下部の［DataTemplateの定義］ボタンの上にある、下方向の矢印をクリックし、より詳細な設定欄を表示させます【図11】。このうち［バインドの方向］の ［OneWay］にチェックをつけます。

［DataTemplateの定義］ボタンをクリックし、［データテンプレートの作成］ウィンドウを表示させます【図12】。

［データテンプレートの作成］ウィンドウでは、指定したオブジェクト上に表示させるデータソース内の情報を指定します。今回はcommentsList上に、人の名前の一覧を表示させることにします。

［新しいデータテンプレートと表示フィールド］にチェックをつけます。チェックの下にある要素の一覧で、［comment］と［name:(String)］の2つにチェックをつけ、ほかのチェックを外してください。指定したら［OK］ボタンを押してください。

［データテンプレートの作成］ウィンドウと［データバインドの作成］ウィンドウが閉じ、LayoutRootグリッド上のcommentsListにはデータソースから読み込んだ人の名が表示されます【図13】。

ここまで行なったら、いったんWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。テスト画面上には、CommentsListが表示されます【図14】。

これで、XMLからデータを読み込み、アプリケーション上で表示することができました。

次回は、CommentsListとほかのコントロールを連携させて、XMLデータソースの情報を表示させる仕組みを作ります。