Layout for UWP apps

App structure, page layout, and navigation are the foundation of your app's user experience. The articles in this section use the Fluent Design System to help you create an app that is easy to navigate and looks great on a variety of devices and screen sizes.

Intro

Intro to app UI design
When you design a UWP app, you create a user interface that suits a variety of devices with different display sizes. This article provides an introduction to the Fluent Design System, an overview of UI-related features and benefits of UWP apps and some tips & tricks for designing a responsive UI.

An app running on multiple devices

App layout and structure

Check out these recommendations for structuring your app and using the three types of UI elements: navigation, command, and content.

Navigation basics
Navigation in UWP apps is based on a flexible model of navigation structures, navigation elements, and system-level features. This article introduces you to these components and shows you how to use them together to create a good navigation experience.

Content basics
The main purpose of any app is to provide access to content: in a photo-editing app, the photo is the content; in a travel app, maps and info about travel destinations is the content; and so on. This article provides content design recommendations for the three content scenarios: consumption, creation, and interaction.

Command basics
Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them.

Page layout

These articles help you create a flexible UI that looks great on different screen sizes, window sizes, resolutions, and orientations.

Screen sizes and breakpoints
The number of device targets and screen sizes across the Windows 10 ecosystem is too great to worry about optimizing your UI for each one. Instead, we recommended designing for a few key widths (also called "breakpoints"): 360, 640, 1024 and 1366 epx.

Define layouts with XAML
How to use XAML properties and layout panels to make your app responsive and adaptive.

Layout panels
Learn about each type of layout each panel and show how to use them to layout XAML UI elements.

Alignment, margins, and padding
In addition to dimension properties (width, height, and constraints) elements can also have alignment, margin, and padding properties that influence the layout behavior when an element goes through a layout pass and is rendered in a UI.

Create layouts with Grid and StackPanel
Use XAML to create the layout for a simple weather app using the Grid and StackPanel elements.