マスター/詳細パターンMaster/details pattern

マスター/詳細パターンには、コンテンツのマスター ウィンドウ (通常はリスト ビューも表示されます) と詳細ウィンドウがあります。The master/details pattern has a master pane (usually with a list view) and a details pane for content. マスター リストの項目を選ぶと、詳細ウィンドウが更新されます。When an item in the master list is selected, the details pane is updated. このパターンは、メールやアドレス帳によく使われます。This pattern is frequently used for email and address books.

重要な API: ListView クラスSplitView クラスImportant APIs: ListView class, SplitView class

マスター/詳細パターンの例

適切なパターンの選択Is this the right pattern?

次の場合は、マスター/詳細パターンが適しています。The master/details pattern works well if you want to:

  • メール アプリ、アドレス帳、またはリスト/詳細レイアウトをベースとするアプリを構築する。Build an email app, address book, or any app that is based on a list-details layout.
  • 大きいコンテンツ コレクションを特定して優先順位を設定する。Locate and prioritize a large collection of content.
  • コンテキスト間を前後に移動しながら、リストから項目をすばやく追加および削除できるようにする。Allow the quick addition and removal of items from a list while working back-and-forth between contexts.

適切なスタイルの選択Choose the right style

マスター/詳細パターンを実装するとき、利用可能な画面領域の量に応じて、スタック スタイルまたは左右に並べるスタイルを使うことをお勧めします。When implementing the master/details pattern, we recommend that you use either the stacked style or the side-by-side style, based on the amount of available screen space.

利用可能なウィンドウの幅Available window width 推奨スタイルRecommended style
320 epx ~ 640 epx320 epx-640 epx スタックStacked
641 epx 以上641 epx or wider 左右に並べるSide-by-side

 

スタック スタイルStacked style

スタック スタイルでは、マスター ウィンドウと詳細ウィンドウのうち 1 つのウィンドウだけが一度に表示されます。In the stacked style, only one pane is visible at a time: the master or the details.

スタック モードのマスター詳細

ユーザーがマスター ウィンドウで作業を始め、マスター リストで項目を選んで詳細ウィンドウに "ドリルダウン" します。The user starts at the master pane and "drills down" to the details pane by selecting an item in the master list. ユーザーから見ると、マスター ビューと詳細ビューが別々の 2 つのページに存在するように表示されます。To the user, it appears as though the master and details views exist on two separate pages.

スタック マスター/詳細パターンの作成Create a stacked master/details pattern

スタック マスター/詳細パターンを作る方法の 1 つは、マスター ウィンドウと詳細ウィンドウにそれぞれ別のページを使うことです。One way to create the stacked master/details pattern is to use separate pages for the master pane and the details pane. マスター ビューを 1 つのページに表示し、詳細ウィンドウを別のページに配置します。Place the master view on one page, and the details pane on a separate page.

スタック スタイルのマスター詳細の構成要素

マスター ビュー ページでは、イメージとテキストが含まれるリストを表示するのにリスト ビュー コントロールが適しています。For the master view page, a list view control works well for presenting lists that can contain images and text.

詳細ビュー ページの場合、最も意味のあるコンテンツ要素 を使います。For the details view page, use the content element that makes the most sense. 多くの個別フィールドがある場合は、グリッド レイアウトを使って要素をフォームに配置することを検討します。If you have a lot of separate fields, consider using a Grid layout to arrange elements into a form.

ページ間の移動の詳細については、「UWP アプリのナビゲーション履歴と前に戻る移動」をご覧ください。For navigation between pages, see navigation history and backwards navigation for UWP apps.

左右に並べるスタイルSide-by-side style

横に並べるスタイルでは、マスター ウィンドウと詳細ウィンドウを同時に表示できます。In the side-by-side style, the master pane and details pane are visible at the same time.

マスター/詳細パターン

マスター ウィンドウのリストは、現在選択されている項目を示すために選択ビジュアルを使用します。The list in the master pane has a selection visual to indicate the currently selected item. マスター リストで新しい項目を選ぶと、詳細ウィンドウが更新されます。Selecting a new item in the master list updates the details pane.

左右に並べるマスター/詳細パターンの作成Create a side-by-side master/details pattern

サイド バイ サイドのマスター/詳細パターンを実装する 1 つの方法として、分割ビュー コントロールを使用する方法があります。One way to create a side-by-side master/details pattern is to use the split view control. 分割ビューのウィンドウにマスター ビューを配置し、分割ビューのコンテンツに詳細ビューを配置します。Place the master view in the split view pane, and the details view in the split view content.

マスター/詳細分割ビュー部品

マスター ウィンドウでは、イメージとテキストが含まれるリストを表示するのにリスト ビュー コントロールが適しています。For the master pane, a list view control works well for presenting lists that can contain images and text.

詳細コンテンツの場合、最も意味のあるコンテンツ要素 を使います。For the details content, use the content element that makes the most sense. 多くの個別フィールドがある場合は、グリッド レイアウトを使って要素をフォームに配置することを検討します。If you have a lot of separate fields, consider using a Grid layout to arrange elements into a form.

アダプティブ レイアウトAdaptive layout

マスター/詳細パターンをすべての画面サイズで実装するには、アダプティブ レイアウト で応答性の高い UI を作成します。To implement a master/details pattern for any screen size, create a responsive UI with an adaptive layout.

アダプティブ マスター詳細レイアウト

アダプティブ マスター/詳細パターンの作成Create an adaptive master/details pattern

アダプティブ レイアウトを作成するには、UI のさまざまな VisualStates を定義し、AdaptiveTriggers を使用して UI のさまざまな状態のブレークポイントを宣言します。To create an adaptive layout, define different VisualStates for your UI, and declare breakpoints for the different states with AdaptiveTriggers.

サンプル コードを入手するGet the sample code

次のサンプルでは、アダプティブ レイアウトを使用してマスター/詳細パターンを実装し、静的なリソース、データベース リソース、およびオンライン リソースに対するデータ バインディングを示します。The following samples implement the master/details pattern with adaptive layouts and demonstrate data binding to static, database, and online resources: