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.
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 epx||Stacked|
|641 epx or wider||Side-by-side|
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. To the user, it appears as though the master and details views exist on two separate pages.
Create a stacked master/details pattern
One way to create the stacked master/details pattern is to use separate pages for the master pane and the details pane. 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.
For navigation between pages, see navigation history and backwards navigation for UWP apps.
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
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.
To implement a master/details pattern for any screen size, create a responsive UI with an adaptive layout.
Create an adaptive master/details pattern
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:
- Master/detail sample
- Master/Details plus Selection sample
- Windows Template Studio Master/Detail sample
- Customer orders database sample
- RSS Reader sample
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.