Designing your app with XAML: the Grid
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Design your app using XAML grid controls and take control of its appearance and behavior.
Introducing app layout with XAML
When you create an iOS app, you usually place the various controls inside a UIViewController and either position them programmatically, or use springs-and-struts or AutoAlign to accommodate different screen sizes and orientations. When the user navigates to a different view, a new UIViewController transitions onto the screen and a new set of controls appears.
In a Windows Store app built using XAML, you add your controls to a page, the equivalent of a UIViewController. When the user navigates to a different view, a new page is displayed. The controls on the page are rarely fixed in place – instead they have a more fluid, web-like approach, necessary because of the large range of possible screen sizes on which your app might appear.
The secret to laying out the controls that make up your Windows Store app is to use the Grid control. Grid controls act rather like HTML Tables, in that you define rows and columns of fixed or floating size, and place your controls inside them. The grid expands and contracts automatically (or when you ask it to) and your controls will be spaced appropriately, no matter the dimensions of the screen.
There are three ways to work with XAML, and you're free to mix-and-match them depending on your programming style.
- Declarative style, in Microsoft Visual Studio. In this approach, you simply type in the necessary XAML tags by hand into the MainPage.xaml and other XAML files in your project.
- Visually, with Blend for Visual Studio. Blend is a standalone graphic-rich tool for editing XAML files. It's similar to how Interface Builder was used with Xcode, back when it was a standalone tool.
- Programmatically. Your code can create XAML objects on the fly, including Grid controls.
Note The Grid control manages the structure of your page. The GridView control is a separate control that manages a collection of data, an analog to the UICollection control in iOS.
Let's take a look at some of the ways you can divide up the grid, by defining some characteristics of the grid up-front. This is an optional practice, but it gives us the control to make our app layout predictable and flexible. Planning and defining the grid layout at this stage greatly simplifies the app design process.
In these examples, we'll adjust the color of each grid cell by adding a rectangle shape. Remember that you can place any control (rectangle shape, text, buttons, even other grids) into the cell by using the Grid.Column and Grid.Row properties.
Example: Divide the screen into three columns of equal sizes
.png)
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue"></Rectangle>
<Rectangle Grid.Column="1" Fill="Red"></Rectangle>
<Rectangle Grid.Column="2" Fill="Green"></Rectangle>
</Grid>
Example: Divide the screen into one column of fixed size, and two of equal sizes
.png)
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="320"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue"></Rectangle>
<Rectangle Grid.Column="1" Fill="Red"></Rectangle>
<Rectangle Grid.Column="2" Fill="Green"></Rectangle>
</Grid>
Although it's best not to specify a width, there are times when it might be necessary. For example, when a specific control just doesn't make sense if it's too small. You can also specify the minimum width the entire app can endure, in the minimum width setting in the appxmanifest file.
Example: Divide the screen into three columns with ratios of 4:2:1
.png)
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Blue"></Rectangle>
<Rectangle Grid.Column="1" Fill="Red"></Rectangle>
<Rectangle Grid.Column="2" Fill="Green"></Rectangle>
</Grid>
Defining the width using an asterisk(*) is a way of specifying a ratio, rather than a fixed number of pixels.
Example: Divide the screen into columns, with a top row of fixed height
.png)
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="128"></RowDefinition>
<RowDefinition> </RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3" Fill="Yellow"></Rectangle>
<Rectangle Grid.Column="0" Grid.Row="1" Fill="Blue"></Rectangle>
<Rectangle Grid.Column="1" Grid.Row="1" Fill="Red"></Rectangle>
<Rectangle Grid.Column="2" Grid.Row="1" Fill="Green"></Rectangle>
</Grid>
This example adds a row into the mix, which requires the rectangle shapes to specify the row to which they belong. The top row is spread across all the columns, by using the Grid.ColumnSpan property.
The secret to a flexible design, if you hadn't guessed by now, is to avoid hard-coding any dimensions, locations, heights or widths. The more you can leave to the XAML system to work out itself, the better your app will work on the wide range of PC hardware available. There are a few exceptions you might want to cover (device orientation, snap) that we'll cover in Designing your app with XAML: Orientation and Designing your app with XAML: Resizing.
Remember to test early and often, using the Windows Simulator, to try out different screen sizes and orientations. Remember also to try snapping the view (drag down from the top, and over to the side to divide the screen between two or more apps).
If you are developing your app in C++, see the topic Supporting screen orientation (DirectX and C++), and if you are using JavaScript, see Part 4: Layout and orientation (Windows Store apps using JavaScript and HTML).
Related topics
Designing your app with XAML: Orientation
Designing your app with XAML: Resizing