Layout for UWP apps

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

Responsive layouts

  • 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.

  • Responsive design techniques

    When you optimize your app's UI for specific screen widths, we say that you're creating a responsive design. Here are six responsive design techniques you can use to customize your app's UI.

Pages and panels

  • Create layouts with XAML

    Learn how to use XAML 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.

  • Create layouts with Grid and StackPanel

    Use XAML to create the layout for a simple weather app using the Grid and StackPanel 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.

Windows and views