第2回　複数のコントロールを連動させる

前回はデータバインドの役割と、XMLファイルからデータを読み込みアプリケーション上で表示させるまでの手順を紹介しました。 今回は、CommentsListとほかのコントロールを連携させて、XMLデータソースの情報を表示させる仕組みを作ります。

XMLデータソースに書かれたコメントを、アプリケーション上で動画の下に表示させます。

［資産ライブラリ］から［Label］を選択し、LayoutRootグリッド内でドラッグします【図1】。するとドラッグしたところにLabelが作成されるので、このLabelには「Comment」という名前をつけます【図2】。

次に、「Comment」を選択した状態で［プロパティ］パネルの［共通プロパティ］内にある［Content］の欄の右端にある小さい四角形をクリックします。選択肢が表示されるので、そのなかから「データバインド」を選択し【図3】、「データのバインドの作成」ウィンドウを表示させます【図4】。

「データのバインドの作成」ウィンドウで［要素プロパティ］タブをクリックすると、左側には参照するシーン要素、右側にはシーン要素のプロパティの一覧が表示されます。

左側の［シーン要素］欄の「LayoutRoot」の左側にある矢印をクリックします。するとLayoutRootグリッド上に配置されているオブジェクトの一覧が表示されるので、「CommentsList」を選択してください。続いて右側の［プロパティ］欄からは「SelectedItem:(Object)」を選択します。

次に、ウィンドウ下部にある下方向の矢印をクリックし、より詳細な設定欄を表示させます。

このうち［バインドの方向］の中で［OneWay］にチェックをつけたら、［DataTemplateの定義］ボタンをクリックし、［データテンプレートの作成］ウィンドウを表示させます【図5】。

［データテンプレートの作成］ウィンドウが表示されたら、［新しいデータテンプレートと表示フィールド］にチェックをつけ、チェックの下にある要素の一覧で［comment(配列)］、 ［comment］、 ［content:(String)」の3つにチェックをつけて、ほかのチェックを外した状態で［OK］ボタンをクリックしてください。

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

ここまで行なったら、いったんWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。CommentsListの中の項目をクリックすると、選択した項目に連動してComment欄の表示コメントが変化します【図7】。

次に、Sliderと動画を配置します。

まず、Sliderコントロールを配置しましょう。［資産ライブラリ］から［Slider］を選択し、LayoutRootグリッド内でドラッグします。するとドラッグしたところにSliderが作成されます【図8】。

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

続いて、動画を配置します。動画を再生させる方法は、Lesson3でも紹介しているので、今回は省略します。詳しくは「Lesson3第3回　ムービーの配置」をご覧ください。

第1回にプロジェクトへ追加したvideo.wmvを表示させます。

第3回で、レイアウトの調整を行いますので、今はレイアウト調整の準備として、video_wmvがほかのコントロールの背面に表示されるようにします。 ［オブジェクトとタイムライン］パネルでvideo_wmvをドラッグして、LayoutRootのすぐ下でドロップします【図10】、【図11】。

※LayoutRootの次のオブジェクト上でドロップすると、video_wmvが最背面に表示されなくなりますので注意してください。LayoutRootの下に黒い線が出た状態でドロップすると、うまく配置が変わります。

ここまで行なったら、いったんでWindow1.xamlを保存し、［F5］キーを押して、このプロジェクトをテスト起動させます。関連するファイルを保存して「プロジェクトのテスト」をクリックしてください【図12】。

今回は、CommentsListとほかのコントロールを連携させて、XMLデータソースの情報を表示させる仕組みを作りました。次回は、動画の再生時間に連動して動画とほかのコントロールの表示が変わっていく仕組みの作成と、XMLを書き換えることで表示を更新する方法を紹介します。