| description | title | keywords | ms.date | ms.topic | ms.assetid | ms.localizationpriority |
|---|---|---|---|---|---|---|
Learn how to create a flexible UI that looks great on different screen sizes, window sizes, resolutions, and orientations. |
Layout overview for Windows apps |
uwp app layout, universal windows platform, app design, interface |
01/28/2022 |
article |
1aa12606-8a99-4db3-8311-90e02fde9cf1 |
medium |
Layout
These articles help you create a flexible UI that looks great on different screen sizes, window sizes, resolutions, and orientations.
:::row::: :::column:::
Screen sizes and breakpoints
Learn about screen sizes across the Windows ecosystem and how to design for breakpoints. :::column-end::: :::column:::
Responsive design techniques
Learn about responsive design techniques that optimize your app's layout for breakpoints. :::column-end::: :::row-end:::
:::row::: :::column:::
Layouts with XAML
Implement responsive UI in XAML with adaptive or tailored layouts. :::column-end::: :::column:::
Multiple views
Show independent parts of your app in separate windows. :::column-end::: :::row-end:::
:::row::: :::column:::
Alignment, margin, padding
Use alignment, margin, and padding to influence layout behavior. :::column-end::: :::column:::
Layout panels
Learn about each type of layout panel an how to use them to arrange UI elements. :::column-end::: :::row-end:::
:::row::: :::column:::
Transforms
Use transforms to rotate, skew, and scale elements. :::column-end::: :::column:::
Attached layouts
Learn advanced layout concepts in XAML and how to create a custom virtualizing layout. :::column-end::: :::row-end:::