[This topic is featured in Develop great apps for Windows 8.]
When you create a Windows Store app built for Windows using C++, C#, or Visual Basic, you have a flexible layout system available that helps you accommodate multiple devices and application states. With a flexible design, you can make your app look great on screens with different sizes, resolutions, pixel densities, and orientations. This quickstart describes how to design a user interface that automatically adjusts to different display states.
Roadmap: How does this topic relate to others? See:
Prerequisites
This topic assumes that you can create a basic Windows Store app using C++, C#, or Visual Basic. For instructions on creating your first Windows Store app, see Creating your first Windows Store app with C# or Visual Basic.
User experience guidelines (best practices)
Although this topic introduces you to some basic layouts, there are a number of user experience guidelines you should keep in mind. See below for details:
- Guidelines for layouts
- Guidelines for scaling to pixel density
- Guidelines for scaling to screens
- Guidelines for snapped and fill views
Layout overview
Layout is the process of sizing and positioning objects in your UI. To position visual objects, you must put them in a Panel control or other container object. The XAML framework provides various Panel controls, such as Canvas, StackPanel, and Grid, that serve as containers and enable you to position and arrange the controls.
The XAML layout system supports both absolute layout and dynamic layout. In an absolute layout, controls are positioned using explicit x and y coordinates (for example, by using a Canvas). In a dynamic layout, the user interface automatically sizes to various screen resolutions (for example, by using a StackPanel or a Grid).
Absolute layout
In an absolute layout, you arrange child elements in a layout panel by specifying their exact locations relative to their parent element. Absolute positioning doesn't consider the size of the screen. If the application requires absolute positioning of UI elements, you can design different pages for different screen resolutions or use scaling as an alternative.
The XAML framework provides a Canvas control to support absolute positioning. To position a control on a Canvas, you set the Canvas.Left and Canvas.Top attached properties on the control. When you use the designer in Visual Studio, these properties are updated when you drag the control inside the Canvas on the design surface.
Dynamic layout
In a dynamic layout, the user interface appears correctly on various screen resolutions. You arrange child elements by specifying how they should be arranged and how they should wrap relative to their parent. For example, you can arrange controls on a panel and specify that they should wrap horizontally. To use automatic or proportional sizing, you must assign special values to the Height and Width properties. The following are the recommended settings for a dynamic layout:
- Set the Height and Width of the control or layout to Auto. When these values are used for controls in the Grid layout, the control fills the cell that contains it. Auto sizing is supported for controls and for the Grid and StackPanel layouts.
- For controls that contain text, remove the Height and Width properties, and set the MinWidth or MinHeight properties. This prevents the text from scaling down to a size that's unreadable.
- To set proportional values for the RowDefinition and ColumnDefinition elements in a Grid layout, use relative Height and Width values. For example, to specify that one column is five times wider than another column, use "*" and "5*" for the Width properties in the ColumnDefinition elements.
Auto and star sizing
Auto sizing is used to allow controls to fit their content, even if the content changes size. Star sizing is used to distribute available space among the rows and columns of a grid by weighted proportions. In XAML, star values are expressed as * (or n*). For example, if you have a grid with four columns, you could set the widths of the columns to the values shown in the following table.
| Column_1 | Auto | The column will size to fit its content. |
| Column_2 | * | After the Auto columns are calculated, the column gets part of the remaining width. Column 2 will be one-half as wide as Column 4. |
| Column_3 | Auto | The column will size to fit its content. |
| Column_4 | 2* | After the Auto columns are calculated, the column gets part of the remaining width. Column 4 will be two times as wide as Column 2. |
Panel controls
The built-in layout panels in the XAML
<Rectangle Canvas.Left="200" Canvas.Top="100" Fill="red" Width="350" Height="350" /> </Canvas>
The preceding XAML produces output that is similar to the following illustration.
StackPanel
The StackPanel is a simple layout panel that arranges its child elements into a single line that can be oriented horizontally or vertically. You can use the Orientation property to specify the direction of the child elements. The default value for the Orientation property is Orientation.Vertical. StackPanel controls are typically used in scenarios where you want to arrange a small subsection of the UI on your page.
The following XAML shows how to create a vertical StackPanel of items.
<StackPanel Margin="20"> <Rectangle Fill="Red" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Green" Width="100" Height="100" Margin="10" /> <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" /> </StackPanel>
The preceding XAML produces output that is similar to the following illustration.
Grid
The Grid control supports arranging controls in multi-row and multi-column layouts. You can specify a Grid control's row and column definitions by using the RowDefinitions and ColumnDefinitions properties that are declared immediately within the Grid control. You can position objects in specific cells of the Grid by using the Grid.Column and Grid.Row attached properties. You can distribute space within a column or a row by using Auto or star sizing. Auto and star sizing were is explained earlier in this topic. Content can span across multiple rows and columns by using the Grid.RowSpan and Grid.ColumnSpan attached properties.
The following XAML shows how to create a Grid with three rows and two columns. The height of the first and third rows is just large enough to contain the text. The height of the second row fills up the rest of the available height. The width of the columns is split equally within the available container width.
<Grid Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" /> <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" /> <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" /> <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" /> </Grid>
The preceding XAML produces output that is similar to the following illustration.
Related topics
Build date: 11/29/2012
