PR
PROJECT KySS(プロジェクト・キッス)
四国のSOHO。薬師寺 国安と,薬師寺 聖によるコラボレーション・ユニット。XMLや.NETプログラミングに関する執筆多数。両名とも,Microsoft MVP for Development Platforms - XML(Oct 2003-Sep 2009),http://www.PROJECTKySS.NET

 今回作るサンプルは,ListBoxとDataGridとTextBoxという3つのコントロールを連動させるものです(図1)。まず,ListBoxコントロールに表示された「ID」を選択すると,その「ID」に該当するDataGridコントロール内の行が選択されます。そして,DataGridコントロール内で選択された行のデータがTextBoxコントロール内に表示されます。また,逆にDataGrid内の任意の行を選択すると,その行の「ID」と同じListBoxコントロール内の「ID」が選択状態になります。

図1●今回作成するサンプル・アプリケーション。ListBoxコントロールから1005のIDが選択され,DataGridコントロール内の該当する行が選択される。選択された行の内容がTextBlockコントロール内に表示される
図1●今回作成するサンプル・アプリケーション。ListBoxコントロールから1005のIDが選択され,DataGridコントロール内の該当する行が選択される。選択された行の内容がTextBlockコントロール内に表示される
[画像のクリックで拡大表示]
・サンプル・アプリケーションはこちらのURLで動作を確認できます。サンプルを動作させるには,Silverlightをインストールしておく必要があります。
・プログラム・ファイルをこちらからダウンロードできます。

手順1:プロジェクトの作成

 では,さっそくSilverlight2アプリケーションを作成していきましょう。VS2008を起動し,メニューから「ファイル(F)/新しいプロジェクト(P)」と選択します。表示される「新しいプロジェクト」画面の「テンプレート(T)」から,「Silverlightアプリケーション」を選択します。

 「プロジェクト名(N)」はデフォルトのSilverlightApplication3のままにしています。「場所(L)」には[参照]ボタンをクリックして,プロジェクトファイルを作成する読者の皆さんの環境での任意のフォルダを指定してください。「ソリューション名(M)」もデフォルトのままにしておきます。「ソリューションのディレクトリを作成(D)」にチェックが付いているのを確認してください。

 VS2008が起動すると,上段にプレビュー,下段にXAMLのコードが表示されます。上段のプレビュー画面にはツールボックスからコントロールをドラッグ&ドロップしてレイアウトすることはできません。あくまでも,XAMLコード内に記述されたコントロールのプレビューを行うだけです。

 一方,XAMLコード内にツールボックスからコントロールをドラッグ&ドロップすることは可能です。その場合はコントロールがXAMLのコードで書き出されます。この画面上からコントロールをレイアウトしてデザインすることは大変に難しいので,Blend2を使ってコントロールをレイアウトします。

 今回使用するXMLファイルは,連載第1回と同じ内容のリスト1です。

リスト1●sampleData_ID.xmlのコード
<?xml version="1.0" ?>
<personalInfo>
  <Info>
    <ID>1001</ID>
    <Name>愛媛花子</Name>
    <Age>30</Age>
    <Address>松山市道後1-1-1</Address>
    <Company>道後IT株式会社</Company>
  </Info>
  <Info>
    <ID>1002</ID>
    <Name>夏目団吾</Name>
    <Age>56</Age>
    <Address>松山市湯渡2-2-2</Address>
    <Company>松山XMLセンター</Company>
  </Info> 
 ~<Info></Info>繰り返し略~
    <Info>
    <ID>1017</ID>
    <Name>鬼北伝承</Name>
    <Age>53</Age>
    <Address>北宇和郡広見町年則</Address>
    <Company>鬼北神社宮司</Company>
  </Info>
</personalInfo>

 リスト1のXMLファイルをソリューションエクスプローラ内のSilverlightApplication3プロジェクトに追加します。SilverlightApplication3プロジェクトを選択しマウスの右クリックで表示されるメニューから,「追加(D)/既存項目の追加(G)」と選択します。皆さんがダウンロードしたサンプルファイルにはすでにXMLファイルはプロジェクト内に追加されていますので,XMLファイルの追加作業は不要です。