リストと詳細パターン

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

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

リストと詳細パターンの例

ヒント

このパターンを実装する XAML コントロールを使用したい場合は、Windows Community Toolkit の ListDetailsView XAML コントロールをお勧めします。

これは適切なパターンですか?

次の場合は、リストと詳細パターンが適しています。

リストと詳細パターンを実装するとき、利用可能な画面領域の量に応じて、上下に並べるスタイルまたは左右に並べるスタイルを使うことをお勧めします。

利用可能なウィンドウの幅	推奨スタイル
320 epx から 640 epx	上下に並べて表示
641 epx 以上	左右に並べて表示

上下に並べるスタイルでは、リストまたは詳細のいずれか 1 つのペインだけが表示されます。

上下に並べるモードでのリストと詳細

ユーザーがリストペインで作業を始め、リストで項目を選んで詳細ペインに "ドリルダウン" します。ユーザーから見ると、リストと詳細のビューが別々の 2 つのページに存在するかのように表示されます。

上下に並べるリストと詳細パターンを作成する方法の 1 つは、リストペインと詳細ペインにそれぞれ別のページを使うことです。リストビューを 1 つのページに、詳細ペインを別のページに配置します。

上下に並べるスタイルのリストと詳細のパーツ

リストビューページでは、画像およびテキストが含められる可能性があるリストを表示するのにリストビューコントロールが適しています。

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

横に並べるスタイルでは、リストペインと詳細ペインを同時に表示できます。

リストと詳細のパターン

リストペインのリストは、現在選択されている項目を示すために選択ビジュアルを使用します。リストで新しい項目を選ぶと、詳細ペインが更新されます。

左右に並べるリストと詳細パターンを作成する 1 つの方法として、分割ビューコントロールを使用する方法があります。分割ビューのペインにリストビューを、分割ビューのコンテンツに詳細ビューを配置します。

リストと詳細の分割ビューのパーツ

リストペインでは、画像およびテキストが含まれる可能性があるリストを表示するのにリストビューコントロールが適しています。

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

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

アダプティブなリストと詳細のレイアウト

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

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

ヒント

このパターンを実装する XAML コントロールを使用したい場合は、Windows Community Toolkit の ListDetailsView XAML コントロールをお勧めします。