試してみよう: 3 階層のリストと詳細のバインドの作成

  • [アーティクル]

トピック「リスト-詳細データ バインドの作成」では、2 階層のリスト-詳細データ バインドの作成方法を説明しました。3 階層のリスト-詳細ビューを作成することもできます。たとえば、曲のコレクションなどで、3 階層のリスト-詳細ビューが使用されることがあります。最初のリスト (ListBox) は、アーティスト名のリストです。次のリスト (2 番目の ListBox) は、選択したアーティストのアルバムのリストです。詳細ビューには、選択したアルバムの名前や選択したアルバム カバーの画像などが含まれます。

tip noteヒント :

ListBox には、リストと詳細ビューの両方が含まれます。リスト自体はリスト ビューで、リストの各アイテムは詳細ビューです。

3 階層のリスト-詳細データ バインドを作成するには

  1. [データ] パネルで、[新しいサンプル データ] をクリックします。[新しいサンプル データ] ダイアログ ボックスの [データ ソース名] ボックスに新しいサンプル データの名前を入力し、[OK] をクリックします。

  2. [データ] パネルで [コレクション] をクリックしてテキストボックスを有効にし、「Artists」と入力します。

  3. [Property1] をクリックしてテキスト ボックスを有効にし、「ArtistName」と入力します。[プロパティの種類の変更] Ff724030.c4968582-0dae-407e-961b-80ffa2838f3b(ja-jp,Expression.40).png をクリックします。[形式] ドロップダウン リストで、[名前] をクリックします。

  4. [Property2] を右クリックして ["Property2" の削除] をクリックします。

  5. [Artists] の右側で、以下の操作を行います。

    1. プラス記号 Ff724030.203a14a5-0db2-486e-9b94-4fdf658d531b(ja-jp,Expression.40).png の横の矢印をクリックし、表示されたドロップダウン メニューで [コレクション プロパティの追加] をクリックします。

    2. [コレクション] をクリックしてテキストボックスを有効にし、「Albums」と入力します。

  6. [Albums] の右側で、以下の操作を行います。

    1. [シンプル プロパティの追加] Ff724030.203a14a5-0db2-486e-9b94-4fdf658d531b(ja-jp,Expression.40).png をクリックします。[Property1] をクリックしてテキスト ボックスを有効にし、「AlbumName」と入力します。

    2. [プロパティの種類の変更] Ff724030.c4968582-0dae-407e-961b-80ffa2838f3b(ja-jp,Expression.40).png をクリックし、[最大文字数] を「2」に設定します。

  7. [Albums] の右側で、以下の操作を行います。

    1. [シンプル プロパティの追加] Ff724030.203a14a5-0db2-486e-9b94-4fdf658d531b(ja-jp,Expression.40).png をクリックします。[Property1] をクリックしてテキスト ボックスを有効にし、「AlbumCover」と入力します。

    2. [プロパティの種類の変更] Ff724030.c4968582-0dae-407e-961b-80ffa2838f3b(ja-jp,Expression.40).png をクリックします。[型] ドロップダウン リストで、[イメージ] をクリックします。

    3. または、[場所] ボックスで [参照] をクリックして、イメージ フォルダーに移動します。

  8. [データ] パネルの上部で [リスト モード] をクリックします。

  9. [データ] パネルからアートボードの左側に [Artists] をドラッグし、[[ListBox] を作成して、その ItemsSource プロパティを Artist にデータ バインドする] というツールヒントが表示されたらドロップします。

  10. [データ] パネルの上部で [詳細モード] をクリックします。

  11. [ツール] パネルで [Grid] をクリックします。アートボードの中央に Grid オブジェクトを描画します。

  12. [データ] パネルから上記で作成した Grid オブジェクトまで [Artists] をドラッグし、[[Grid].d:DataContext を Artists[0] にデータ バインドする] というツールヒントが表示されたらドロップします。

  13. [データ] パネルの上部で [リスト モード] をクリックします。

  14. [データ] パネルから Grid オブジェクトの上まで [Albums] をドラッグし、[[ListBox] を作成して、その ItemsSource プロパティを Albums にデータ バインドする] というツールヒントが表示されたらドロップします。

  15. [データ] パネルの上部で [詳細モード] をクリックします。

  16. CTRL キーを押しながら、[データ] パネルで、[AlbumCover] と [AlbumName] をクリックします。[AlbumCover] と [AlbumName] をアートボードの右側にドラッグし、[詳細ビューの作成] というツールヒントが表示されたらドロップします。

  17. F5 キーを押してプロジェクトをビルドしてから実行します。

これで、左側にある最初のリストのアイテムをクリックすると、2 番目のリストが更新されるようになります。2 番目のリストのアイテムを選択すると、詳細ビューが更新されます。

関連項目

タスク

リスト-詳細データ バインドの作成

Copyright ©2011 by Microsoft Corporation. All rights reserved.