マスター詳細データ バインドの作成

  • [アーティクル]

マスターと詳細データのバインドは、次の 2 つの部分で構成されています。

  • アイテムの一覧を表示するマスター ビュー。通常、このアイテムはデータのコレクションです。

  • 一覧で選択したアイテムの詳細を表示する詳細ビュー。

このユーザー ガイドは、マスターと詳細データをバインドしたデザインの例です。目次がマスター ビュー、表示されるトピックが詳細ビューになります。

Microsoft Expression Blend には、アートボードでこのようなビューをデザインするときに簡単にデータを追加できるように、[データ] パネルに 2 つのモードがあります。

  • [リスト] モードでは、[データ] パネルからドラッグするアイテムでマスター ビューを作成します。アイテムは、[ListBox]、[DataGrid]、[TreeView] コントロールにドラッグできます。アートボードの空白の部分にアイテムをドラッグすると、自動的に [ListBox] が作成されます。

  • [詳細] モードでは、[データ] パネルからドラッグするアイテムを含む [Grid] レイアウトパネルの詳細ビューを作成します。または、別のレイアウト パネル ([Canvas]など) を作成して、それにアイテムをドラッグすることもできます。

Expression Blend によって、マスター ビューを表示するオブジェクトの SelectedItem に [Grid] オブジェクトの [DataContext] プロパティが設定され、マスター ビューと詳細ビューの関係が自動的に構成されます。または、この関係を手動で構成することもできます。

Ee341499.alert_tip(JA-JP,Expression.30).gifヒント :

Expression Blend には、マスターと詳細データを表示する簡単なデザインのサンプルが用意されているので、このデザインで使用するオブジェクトをカスタマイズできます。Expression Blend でサンプルを開くには、[ヘルプ] メニューの [ようこそ画面] をクリックして、[サンプル] タブ、[ColorSwatchSL] の順にクリックします。

マスターと詳細データを自動的にバインドするには

  1. データ ソースがない場合は、サンプル データ ソースを作成して、実行時に使用できるようにします。

    詳細については、「サンプル データの生成」を参照してください。

  2. [データ] パネルの [リスト モード] Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(JA-JP,Expression.30).png をクリックします。

    Ee341499.alert_tip(JA-JP,Expression.30).gifヒント :

    [リスト モード] では、アートボードにドラッグするデータのアイテムは、独立したデータ バインドかマスター ビューの一部だとみなされます。これは、[データ] パネルの既定のモードです。

  3. [データ] パネルで、データ コレクション内のプロパティをアートボードにドラッグして ListBox オブジェクトを作成するか、既存の [ListBox] Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(JA-JP,Expression.30).png、[DataGrid] Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(JA-JP,Expression.30).png、[TreeView] Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(JA-JP,Expression.30).png オブジェクトのいずれかにドラッグします。

    Ee341499.alert_note(JA-JP,Expression.30).gifメモ :

    [データ バインドの作成] ダイアログ ボックスが表示された場合は、[リスト モード] ではなく [詳細モード] になっている可能性があります。

    オブジェクトに、各プロパティのデータ コレクションが表示されます。

    リスト モードでデータを [ListBox] オブジェクトにドラッグする

    Ee341499.86a5a839-015a-4510-8617-94487f4adb09(JA-JP,Expression.30).png

    リスト モードでデータを [DataGrid] オブジェクトにドラッグする

    Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(JA-JP,Expression.30).png

    リスト モードでデータを [TreeView] オブジェクトにドラッグする

    Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(JA-JP,Expression.30).png

  4. [データ] パネルの [詳細モード] Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(JA-JP,Expression.30).png をクリックします。

    Ee341499.alert_tip(JA-JP,Expression.30).gifヒント :

    [詳細モード] では、アートボードにドラッグするデータのアイテムは、詳細ビューの一部だとみなされます。[Grid] オブジェクトが作成され、データの各アイテムの子オブジェクトを表示します。[Grid] オブジェクトは、[リスト モード] で作成された最後のオブジェクトのデータ コンテキストと選択アイテムを使用するように自動的に構成されます。.

  5. [データ] パネルで、データ コレクション内のプロパティをアートボードにドラッグして [Grid] レイアウト パネルを作成するか、既存のレイアウト パネルにドラッグします。

    レイアウト パネルに、各プロパティの名前と値を示す [TextBlock] コントロールが表示されます。

    [ListBox] のバインド作成後に詳細モードでデータをドラッグする

    Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(JA-JP,Expression.30).png

    [DataGrid] のバインド作成後に詳細モードでデータをドラッグする

    Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(JA-JP,Expression.30).png

    [TreeView] のバインド作成後に詳細モードでデータをドラッグする

    Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(JA-JP,Expression.30).png

  6. F5 キーを押して、アプリケーションをテストします。マスター ビューでアイテムをクリックし、対応する詳細ビューが表示されることを確認します。

    マスター コントロールでアイテムを選択し、対応する詳細ビューを表示する

    Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(JA-JP,Expression.30).png

マスターと詳細データを手動でバインドするには

  1. データ ソースがない場合は、サンプル データ ソースを作成して、実行時に使用できるようにします。

    詳細については、「サンプル データの生成」を参照してください。

  2. [ツール] パネルの [ComboBox] Ee341499.b174a511-dd12-4a45-a986-034de7693de9(JA-JP,Expression.30).png など、マスター ビューを表示するのに使うコントロールを選択し、アートボードに描画します。

  3. [オブジェクトとタイムライン] パネルで、新しいオブジェクトを右クリックし、[名前の変更] を選択してから新しい名前を入力し、Enter キーを押します。

    Ee341499.alert_tip(JA-JP,Expression.30).gifヒント :

    作成されたオブジェクトに明示的な名前は付きません。オブジェクトの名前を変更するには、詳細ビュー オブジェクトの [DataContext] プロパティで名前を作成します。

  4. [データ] パネルの [リスト モード] Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(JA-JP,Expression.30).png をクリックします。

  5. [データ] パネルで、データ コレクション内からプロパティをマスター オブジェクトにドラッグします。

    リスト モードでデータを [ComboBox] オブジェクトにドラッグする

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(JA-JP,Expression.30).png

  6. [データ] パネルの [詳細モード] Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(JA-JP,Expression.30).png をクリックします。

  7. [データ] パネルで、データ コレクション内のプロパティをアートボードにドラッグして [Grid] レイアウト パネルを作成するか、既存のレイアウト パネルにドラッグします。

    レイアウト パネルに、各プロパティの名前と値を示す [TextBlock] コントロールが表示されます。

    [ComboBox] のバインド作成後に詳細モードでデータをドラッグする

    Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(JA-JP,Expression.30).png

  8. F5 キーを押して、アプリケーションをテストします。マスター オブジェクトで別のアイテムを選択しても、詳細ビューが更新されない場合は、次の手順に進みます。

  9. 詳細ビューを表すレイアウト パネル (通常は [Grid] オブジェクト) を選択します。

  10. [プロパティ] パネルで [DataContext] プロパティの横にある[詳細プロパティ オプション] Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[データ バインド] をクリックします。

  11. [データ バインドの作成] ダイアログ ボックスの [要素プロパティ] タブをクリックします。

  12. [シーン要素] でマスター オブジェクトを選択し、[プロパティ] で [SelectedItem] プロパティを選択します。

    詳細オブジェクトとマスター オブジェクトの関係の作成

    Ee341499.ab312546-3416-42c8-83e5-610590939041(JA-JP,Expression.30).png

  13. [OK] をクリックして、[データ バインドの作成]ダイアログ ボックスを閉じます。

    詳細レイアウト パネルの子アイテムではすべて、マスター オブジェクトの選択されたアイテムのデータ コンテキストを使用します。

  14. 詳細レイアウト パネルの子アイテムが、対応するデータのプロパティにバインドされていることを確認します。子アイテムの中にはデータにバインドされていないものがあります。これは、このアイテムがデータのプロパティの名前の表示用だからです。一方、オブジェクトで選択されたアイテムに対応するデータを表示する子アイテムは、データにバインドされている必要があります。たとえば、データのプロパティ名が表示されていない [TextBlock] の子アイテムの 1 つを選択して、[プロパティ] パネルで [Text] プロパティを確認します。このプロパティが黄色い枠で囲まれていない場合は、[TextBlock] オブジェクトがデータにバインドされていません。[TextBlock] オブジェクトをバインドするには

    1. [Text] プロパティの横にある [詳細プロパティ オプション ] Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[データ バインド] をクリックします。

    2. [データ バインドの作成] ダイアログ ボックスの [明示的なデータ コンテキスト] タブをクリックします。

    3. [フィールド] の [コレクション] を展開し、この [TextBlock] オブジェクトで表示するデータのプロパティを選択します。

      Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(JA-JP,Expression.30).png

    4. [OK] をクリックして、[データ バインドの作成]ダイアログ ボックスを閉じます。

      [Text] プロパティに黄色い枠が付き、プロパティにデータがバインドされたことを示します。

      Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(JA-JP,Expression.30).png

  15. F5 キーを押して、アプリケーションをテストします。

関連項目

タスク

DataGrid コントロールの使用

TreeView コントロールを使用する

概念

データを表示するコントロールのスタイルを設定する