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

[アーティクル]
10/11/2017

リスト-詳細のデザインは、次の 2 つの部分で構成されています。

データのコレクションなど、アイテムの一覧を表示するリストビュー。
一覧で選択したアイテムの詳細を表示する詳細ビュー。

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

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

[リスト] モードでは、[データ] パネルからドラッグするアイテムでリストビューを作成します。アイテムは、ListBox、DataGrid、TreeView コントロールにドラッグできます。アートボードの空白の部分にアイテムをドラッグすると、自動的に ListBox が作成されます。
[詳細] モードでは、[データ] パネルからドラッグするアイテムを含む Grid レイアウトパネルの詳細ビューを作成します。または、別のレイアウトパネル (Canvas レイアウトパネルなど) を作成して、それにアイテムをドラッグすることもできます。

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

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

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

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

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

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

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

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

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

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

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

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

Ee341499.86a5a839-015a-4510-8617-94487f4adb09(ja-jp,Expression.40).png

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

Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(ja-jp,Expression.40).png

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

Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(ja-jp,Expression.40).png

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

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

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

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

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

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

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

[TreeView] のバインド作成後に詳細モードでデータをドラッグする
F5 キーを押して、アプリケーションをテストします。リストビューでアイテムをクリックし、対応する詳細ビューが更新されることを確認します。

リストコントロールでアイテムを選択し、対応する詳細ビューを更新する

この手順では、2 階層のリスト-詳細ビューの作成方法を説明しました。3 階層のリスト-詳細ビューを作成することもできます。

詳細については、「試してみよう: 3 階層のリストと詳細のバインドの作成」を参照してください。

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

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

詳細については、「サンプルデータの生成」を参照してください。
[ツール] パネルの [ComboBox] など、リストビューを表示するのに使うコントロールを選択し、アートボードに描画します。

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

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

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

リストモードでデータを [ComboBox] オブジェクトにドラッグする
[データ] パネルの [詳細モード] をクリックします。
[データ] パネルで、データコレクション内のプロパティをアートボードにドラッグして Grid レイアウトパネルを作成するか、既存のレイアウトパネルにドラッグします。

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

[ComboBox] のバインド作成後に詳細モードでデータをドラッグする
F5 キーを押して、アプリケーションをテストします。リストオブジェクトで別のアイテムを選択しても、詳細ビューが更新されない場合は、次の手順に進みます。
詳細ビューを表すレイアウトパネル (通常は Grid オブジェクト) を選択します。
[プロパティ] パネルで DataContext プロパティの横にある [詳細オプション] をクリックし、[データバインド] をクリックします。
[データバインドの作成] ダイアログボックスの [要素プロパティ] タブをクリックします。
[シーン要素] でリストオブジェクトを選択し、[プロパティ] で SelectedItem プロパティを選択します。

詳細オブジェクトとリストオブジェクトの関係の作成
[OK] をクリックして、[データバインドの作成]ダイアログボックスを閉じます。

詳細レイアウトパネルの子アイテムではすべて、リストオブジェクトで選択されたアイテムのデータコンテキストを使用します。
詳細レイアウトパネルの子アイテムが、対応するデータのプロパティにバインドされていることを確認します。子アイテムの中にはデータにバインドされていないものがあります。これは、このアイテムがデータのプロパティの名前の表示用だからです。一方、リストオブジェクトで選択されたアイテムに対応するデータを表示する子アイテムは、データにバインドされている必要があります。たとえば、データのプロパティ名が表示されていない TextBlock の子アイテムの 1 つを選択して、[プロパティ] パネルで Text プロパティを見つけます。このプロパティが黄色い枠で囲まれていない場合は、TextBlock オブジェクトがデータにバインドされていません。TextBlock オブジェクトをバインドするには:
1. Text プロパティの横にある [詳細オプション ] をクリックし、[データバインド] をクリックします。
2. [データバインドの作成] ダイアログボックスの [明示的なデータコンテキスト] タブをクリックします。
3. [フィールド] の [コレクション] を展開し、この TextBlock オブジェクトで表示するデータのプロパティを選択します。
4. [OK] をクリックして、[データバインドの作成]ダイアログボックスを閉じます。
  
  Text プロパティに黄色い枠が付き、プロパティにデータがバインドされたことを示します。
F5 キーを押して、アプリケーションをテストします。