今回作るサンプルは,ListBoxとDataGridとTextBoxという3つのコントロールを連動させるものです(図1)。まず,ListBoxコントロールに表示された「ID」を選択すると,その「ID」に該当するDataGridコントロール内の行が選択されます。そして,DataGridコントロール内で選択された行のデータがTextBoxコントロール内に表示されます。また,逆にDataGrid内の任意の行を選択すると,その行の「ID」と同じListBoxコントロール内の「ID」が選択状態になります。
・プログラム・ファイルをこちらからダウンロードできます。
手順1:プロジェクトの作成
では,さっそくSilverlight2アプリケーションを作成していきましょう。VS2008を起動し,メニューから「ファイル(F)/新しいプロジェクト(P)」と選択します。表示される「新しいプロジェクト」画面の「テンプレート(T)」から,「Silverlightアプリケーション」を選択します。
「プロジェクト名(N)」はデフォルトのSilverlightApplication3のままにしています。「場所(L)」には[参照]ボタンをクリックして,プロジェクトファイルを作成する読者の皆さんの環境での任意のフォルダを指定してください。「ソリューション名(M)」もデフォルトのままにしておきます。「ソリューションのディレクトリを作成(D)」にチェックが付いているのを確認してください。
VS2008が起動すると,上段にプレビュー,下段にXAMLのコードが表示されます。上段のプレビュー画面にはツールボックスからコントロールをドラッグ&ドロップしてレイアウトすることはできません。あくまでも,XAMLコード内に記述されたコントロールのプレビューを行うだけです。
一方,XAMLコード内にツールボックスからコントロールをドラッグ&ドロップすることは可能です。その場合はコントロールがXAMLのコードで書き出されます。この画面上からコントロールをレイアウトしてデザインすることは大変に難しいので,Blend2を使ってコントロールをレイアウトします。
今回使用するXMLファイルは,連載第1回と同じ内容のリスト1です。
<?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ファイルの追加作業は不要です。