Skip to content

Latest commit

 

History

History
197 lines (180 loc) · 8.07 KB

index.md

File metadata and controls

197 lines (180 loc) · 8.07 KB
description title author layout keywords ms.author ms.date ms.topic ms.prod ms.technology ms.assetid ms.localizationpriority
Learn how to design and code a UWP app that's easy to navigate and looks great on a variety of devices and screen sizes.
UWP app layout design
mijacobs
LandingPage
uwp app layout, universal windows platform, app design, interface
mijacobs
3/7/2018
article
windows
uwp
1aa12606-8a99-4db3-8311-90e02fde9cf1
medium

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 called breakpoints.

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

Transformations