リスト/詳細パターン

リスト/詳細パターンには、リスト ペイン (通常は リスト ビューあり) とコンテンツの詳細ペインがあります。 リスト内の項目が選択されると、詳細ペインが更新されます。 このパターンは、電子メール やアドレス帳でよく使用されます。

重要な API: ListView クラス、 SplitView クラス

これは正しいパターンですか?

リスト/詳細パターンは、次の場合に適切に機能します。

• 電子メール アプリ、アドレス帳、またはリストの詳細レイアウトに基づく任意のアプリを作成します。
• 大量のコンテンツのコレクションを見つけて優先順位を付けます。
• コンテキスト間でやり取りしながら、リストからの項目の迅速な追加と削除を許可します。

適切なスタイルを選択する

リスト/詳細パターンを実装する場合は、使用可能な画面領域の量に基づいて、積み上げスタイルまたはサイド バイ サイド スタイルを使用することをお勧めします。

積み上げスタイル

積み上げスタイルでは、一度に 1 つのペイン (リストまたは詳細) のみが表示されます。

ユーザーはリスト ウィンドウから開始し、リスト内の項目を選択して詳細ウィンドウに "ドリルダウン" します。 ユーザーには、リスト ビューと詳細ビューが 2 つの個別のページに存在するかのように表示されます。

積み上げリスト/詳細パターンを作成する

積み上げリスト/詳細パターンを作成する 1 つの方法は、リスト ウィンドウと詳細ウィンドウに個別のページを使用することです。 リスト ビューを 1 ページに配置し、詳細ウィンドウを別のページに配置します。

リスト ビュー ページの場合、 リスト ビュー コントロールは、画像やテキストを含むことができるリストを表示する場合に適しています。

詳細ビュー ページでは、最も意味のある コンテンツ要素 を使用します。 多数の個別のフィールドがある場合は、 グリッド レイアウトを使用して要素をフォームに配置することを検討してください。

ページ間のナビゲーションについては、 Windows アプリのナビゲーション履歴と後方ナビゲーションを参照してください。

サイド バイ サイド スタイル

サイド バイ サイド スタイルでは、リスト ウィンドウと詳細ウィンドウが同時に表示されます。

リスト ペインのリストには、現在選択されている項目を示す選択ビジュアルがあります。 一覧で新しい項目を選択すると、詳細ウィンドウが更新されます。

並列のリストと詳細のパターンを作成する

サイド バイ サイドリスト/詳細パターンを作成する 1 つの方法は、 分割ビュー コントロールを使用することです。 分割ビュー ペインにリスト ビューを配置し、詳細ビューを分割ビューのコンテンツに配置します。

リスト ウィンドウでは、 リスト ビュー コントロールは、画像やテキストを含むことができるリストを表示する場合に適しています。

詳細コンテンツについては、最も意味のある content 要素 を使用します。 多数の個別のフィールドがある場合は、 グリッド レイアウトを使用して要素をフォームに配置することを検討してください。

アダプティブ レイアウト

任意の画面サイズのリスト/詳細パターンを実装するには、 アダプティブ レイアウトを使用して応答性の高い UI を作成します。

アダプティブ リスト/詳細パターンを作成する

アダプティブ レイアウトを作成するには、UI に異なる VisualStates を定義し、 AdaptiveTriggers を使用してさまざまな状態のブレークポイントを宣言します。

サンプル コードを取得する

次のサンプルでは、アダプティブ レイアウトを使用してリスト/詳細パターンを実装し、静的、データベース、およびオンライン リソースへのデータ バインディングを示します。

• マスター/詳細サンプル
• ListView と GridView のサンプル
• 顧客注文データベースのサンプル
• RSS リーダーのサンプル

関連資料

• リスト
• アプリバーとコマンド バー
• ListView クラス
• SplitView クラス