Page layout

In UWP apps, each Page generally has navigation, command, and content elements.

Your app can have multiple pages: when a user launches a UWP app, the application code creates a Frame to place inside of the application's Window. The Frame can then navigate between the application's Page instances.

Most pages follow a common layout structure, and this article covers which UI elements you'll need, and where they should go on a page.

page structure

Your app layout begins with the navigation model you choose, which defines how your users navigate between pages in your app. For this article, we'll discuss two common navigation patterns: left nav and top nav. For guidance on choosing other navigation options, see Navigation design basics for UWP apps.

top and left navigation patterns

Left nav

Left nav, or the nav pane pattern, is generally reserved for app-level navigation and exists at the highest level within the app, meaning that it should always be visible and available. We recommend left nav when there are more than five navigational items, or more than five pages in your app. The nav pane pattern typically contains:

  • Navigation items
  • Entry point into app settings
  • Entry point into account settings

The NavigationView control implements the left nav pattern for UWP.

When a navigation item is selected, the Frame should navigate to the selected item's Page.

nav pane expanded

The menu button allows users to expand and collapse the nav pane. When the screen size is larger than 640 px, clicking the menu button collapses the nav pane into a bar.

nav pane compact

When the screen size is smaller than 640 px, the nav pane is fully collapsed.

nav pane minimal

Top nav

Top nav can also act as top-level navigation. While left nav is collapsible, top nav is always visible. The NavigationView control implements the top navigation and tabs pattern for UWP.

top navigation

Command bar

Next, you might want to provide users with easy access to your app's most common tasks. A command bar can provide access to app-level or page-level commands, and it can be used with any navigation pattern.

command bar placement at top

The command bar can be placed at the top or bottom of the page, whichever is best for your app.

command bar placement at bottom

Content

Finally, content varies widely from app to app, so you can present content in many different ways. Here, we describe some common page patterns that you might want to use in your app. Many apps use some, or all, of these common page patterns to display different types of content. Likewise, feel free to mix and match these patterns to optimize for your app.

Landing

landing page

Landing pages, also known as hero screens, often appear at the top level of an app experience. The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

Collections

gallery

Collections allow users to browse groups of content or data. Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

Master/detail

master details

The master/details model consists of a list view (master) and a content view (detail). Both panes are fixed and have vertical scrolling. When an item in the list view is selected, the content view is correspondingly updated.

Forms

form

A form is a group of controls that collect and submit data from users. Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

Sample apps

To see how these patterns can be implemented, check out our UWP sample apps: