Master/Details-MusterMaster/details pattern

Das Master/Details-Muster verfügt über einen Masterbereich (in der Regel mit einer Listenansicht) und einen Detailbereich für Inhalte.The master/details pattern has a master pane (usually with a list view) and a details pane for content. Wenn ein Element in der Masterliste ausgewählt wird, wird der Detailbereich aktualisiert.When an item in the master list is selected, the details pane is updated. Dieses Muster wird häufig für E-Mails und Adressbücher verwendet.This pattern is frequently used for email and address books.

Wichtige APIs: ListView class, SplitView classImportant APIs: ListView class, SplitView class

Beispiel für das Master/Details-Muster

Ist dies das richtige Muster?Is this the right pattern?

Master/Details-Muster eignet sich gut für Folgendes:The master/details pattern works well if you want to:

  • Erstellen einer E-Mail-App, eines Adressbuchs oder einer anderen App, die auf einem Listen-Details-Layout basiertBuild an email app, address book, or any app that is based on a list-details layout.
  • Suchen und Priorisieren einer großen Sammlung von InhaltenLocate and prioritize a large collection of content.
  • Schnelles Hinzufügen und Entfernen von Elementen aus einer Liste und gleichzeitiges Wechseln zwischen KontextenAllow the quick addition and removal of items from a list while working back-and-forth between contexts.

Auswählen des richtigen FormatsChoose the right style

Beim Implementieren des Master/Details-Musters ist es ratsam, je nach Größe der verfügbaren Bildschirmfläche das gestapelte Format oder das Format mit paralleler Anordnung zu verwenden.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.

Verfügbare FensterbreiteAvailable window width Empfohlenes FormatRecommended style
320 Epx - 640 Epx320 epx-640 epx GestapeltStacked
641 Epx oder breiter641 epx or wider NebeneinanderSide-by-side

 

Gestapeltes FormatStacked style

Im gestapelten Format ist jeweils nur ein Bereich sichtbar: die Master- oder der Detailbereich.In the stacked style, only one pane is visible at a time: the master or the details.

Master/Details im Stapelmodus

Der Benutzer beginnt im Masterbereich und führt einen Drilldown zum Detailbereich durch, indem er ein Element in der Masterliste auswählt.The user starts at the master pane and "drills down" to the details pane by selecting an item in the master list. Für den Benutzer sieht es so aus, als ob sich die Masteransicht und die Detailansicht auf zwei getrennten Seiten befinden.To the user, it appears as though the master and details views exist on two separate pages.

Erstellen eines gestapelten Master/Details-MustersCreate a stacked master/details pattern

Eine Möglichkeit zur Erstellung des gestapelten Master/Details-Musters ist die Verwendung separater Seiten für den Masterbereich und den Detailbereich.One way to create the stacked master/details pattern is to use separate pages for the master pane and the details pane. Platziere die Masteransicht auf einer Seite und den Detailbereich auf einer separaten Seite.Place the master view on one page, and the details pane on a separate page.

Teile der Master/Details-Ansicht im gestapelten Format

Für die Seite mit der Masteransicht eignet sich ein Steuerelement vom Typ Listenansicht gut für die Darstellung von Listen, die Bilder und Text enthalten können.For the master view page, a list view control works well for presenting lists that can contain images and text.

Verwende für die Seite mit der Detailansicht das am besten geeignete Inhaltselement.For the details view page, use the content element that makes the most sense. Wenn viele separate Felder vorhanden sind, erwäge die Verwendung eines Rasterlayouts zum Anordnen der Elemente in einem Formular.If you have a lot of separate fields, consider using a Grid layout to arrange elements into a form.

Weitere Informationen zur Navigation zwischen Seiten findest du unter Navigationsverlauf und Rückwärtsnavigation für UWP-Apps.For navigation between pages, see navigation history and backwards navigation for UWP apps.

Format mit paralleler AnordnungSide-by-side style

Im Format mit paralleler Anordnung sind Master- und Detailbereich gleichzeitig sichtbar.In the side-by-side style, the master pane and details pane are visible at the same time.

Das Master/Details-Muster

Für die Liste im Masterbereich wird eine visuelle Auswahlmethode genutzt, um das derzeit ausgewählte Element anzugeben.The list in the master pane has a selection visual to indicate the currently selected item. Wenn in der Masterliste ein neues Element ausgewählt wird, wird der Detailbereich aktualisiert.Selecting a new item in the master list updates the details pane.

Erstellen eines parallelen Master/Details-MustersCreate a side-by-side master/details pattern

Eine Möglichkeit zur Erstellung eines parallelen Master/Details-Musters ist die Verwendung des Steuerelements für die geteilte Ansicht.One way to create a side-by-side master/details pattern is to use the split view control. Platziere die Masteransicht im Bereich der geteilten Ansicht und die Detailansicht im Inhaltsbereich der geteilten Ansicht.Place the master view in the split view pane, and the details view in the split view content.

Teile der geteilten Master/Details-Ansicht

Für den Masterbereich eignet sich ein Listenansicht-Steuerelement gut für die Darstellung von Listen, die Bilder und Text enthalten können.For the master pane, a list view control works well for presenting lists that can contain images and text.

Verwende für den Detailinhalt das am besten geeignete Inhaltselement.For the details content, use the content element that makes the most sense. Wenn viele separate Felder vorhanden sind, erwäge die Verwendung eines Rasterlayouts zum Anordnen der Elemente in einem Formular.If you have a lot of separate fields, consider using a Grid layout to arrange elements into a form.

Adaptives LayoutAdaptive layout

Um ein Master/Details-Muster für jede Bildschirmgröße zu implementieren, erstelle eine reaktionsfähige Benutzeroberfläche mit einem adaptiven Layout.To implement a master/details pattern for any screen size, create a responsive UI with an adaptive layout.

Adaptives Master/Details-Layout

Erstellen eines adaptiven Master/Detail-MustersCreate an adaptive master/details pattern

Definiere zum Erstellen eines adaptiven Layouts verschiedene VisualStates-Elemente für deine Benutzeroberfläche, und deklariere Haltepunkte für die verschiedenen Zustände mit AdaptiveTriggers.To create an adaptive layout, define different VisualStates for your UI, and declare breakpoints for the different states with AdaptiveTriggers.

Beispielcode herunterladenGet the sample code

In den folgenden Beispielen implementierst du das Master/Details-Muster mit adaptiven Layouts und veranschaulichst das Binden von Daten an statische Ressourcen sowie Datenbank- und Onlineressourcen:The following samples implement the master/details pattern with adaptive layouts and demonstrate data binding to static, database, and online resources: