マスター/詳細パターン

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

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

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

適切なパターンの選択

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

  • メール アプリ、アドレス帳、またはリスト/詳細レイアウトをベースとするアプリを構築する。
  • 大きいコンテンツ コレクションを特定して優先順位を設定する。
  • コンテキスト間を前後に移動しながら、リストから項目をすばやく追加および削除できるようにする。

適切なスタイルの選択

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

利用可能なウィンドウの幅 推奨スタイル
320 epx ~ 719 epx スタック
720 epx 以上 左右に並べる

スタック スタイル

スタック スタイルでは、マスター ウィンドウと詳細ウィンドウのうち 1 つのウィンドウだけが一度に表示されます。

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

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

スタック マスター/詳細パターンの作成

スタック マスター/詳細パターンを作る方法の 1 つは、マスター ウィンドウと詳細ウィンドウにそれぞれ別のページを使うことです。 マスター リストを表示するリスト ビューを 1 つのページに配置し、詳細ウィンドウのコンテンツ要素を別のページに配置します。

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

マスター ウィンドウでは、イメージとテキストが含まれるリストを表示するのにリスト ビュー コントロールが適しています。

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

左右に並べるスタイル

横に並べるスタイルでは、マスター ウィンドウと詳細ウィンドウを同時に表示できます。

マスター/詳細パターン

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

左右に並べるマスター/詳細パターンの作成

マスター ウィンドウでは、イメージとテキストが含まれるリストを表示するのにリスト ビュー コントロールが適しています。

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

コード サンプルを入手する

マスター/詳細パターンを示すサンプル コードについては、次のサンプルをご覧ください。