A big percentage of all apps is showing data to the user, formatted in different ways. Sometimes it are images, the other time graphs, but a lot of times you use a data grid to present your data to the user. To present this data in the most smooth way to the user, you often want to make the columns / rows scalable. With this approach the data is shown in the most comfortable way to the user when they use different devices and resolutions. When using XAML in your Windows 8 metro style app, you can easily define a dynamic layout for your grid by using the ColumnDefinition and/or RowDefinition classes.
Below I will show you the XAML of an dynamic layout grid and will tell you about the used properties and how to add controls to the different positions created in the grid.
1 <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
2 <Grid.ColumnDefinitions>
3 <ColumnDefinition Width="Auto" />
4 <ColumnDefinition Width="*" />
5 <ColumnDefinition Width="Auto" />
6 <ColumnDefinition Width="2*" />
7 </Grid.ColumnDefinitions>
8 </Grid>
As you can see above right now we only use the ColumnDefinitions to define the columns in our grid. You can see this as the skeleton for our grid. Later we will make sure that every columndefinition will have the right controls added to it.
In this article we only focus on the (easy) dynamic part of the layout. In later articles I will talk about a more complex dynamic layout. That’s why we for now will only talk about the Width property. The Width property can be assigned with the following values: Auto, * or a double value.
| Auto |
The size is determined by the size properties of the content object. |
| * |
The value is expressed as a weighted proportion of available space. |
| Double value |
The value is expressed in pixels. |
So if you have a columndefinition with width set to Auto and you add a control to the column that has a width of 100 pixels, than your column will be 100 pixels + a small amount needed for borders etc. You can see Auto as the fit to content option.
* is the option if you want to make sure that your grid is filled up 100%, because this one will fill up the space that is left after all other columndefinitions have taken their space. If you have multiple columns with Width=”*” than the width will be equally divided over the columns. In our example you see that the third column definition has the width set to “2*”. This means that this column will take up twice as much space as the other column. If there is for example 300 pixels left in our grid, than column 1 will get 100 pixels and column 3 will get 200 pixels.
The last option is setting a width to a double value. This value is the exact value in pixels that the column will take.
Adding controls to the grid
Okay, lets add some controls to the grid to see how that works. First I will show you the full example of the dynamic layout grid, further I will explain what’s happening.
1 <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
2 <Grid.ColumnDefinitions>
3 <ColumnDefinition Width="Auto" />
4 <ColumnDefinition Width="*" />
5 <ColumnDefinition Width="Auto" />
6 <ColumnDefinition Width="2*" />
7 </Grid.ColumnDefinitions>
8 <TextBlock Width="Auto" Text="Column 1" Grid.Column="0"></TextBlock>
9 <Button Width="Auto" Content="Column 2" Grid.Column="1"></Button>
10 <TextBlock Width="Auto" Text="Column 3" Grid.Column="2"></TextBlock>
11 <Button Width="Auto" Content="Column 4" Grid.Column="3"></Button>
12 </Grid>
As you can see in the above example we just start adding controls to are grid right after the ColumnDefinitions element. In our example we added two text blocks and two buttons. With the Grid.Column property we can define in which column these controls are added. Adding the controls to the grid can be done in a random order if you want. As you can see the Grid.Column property is a zero-based index.
Below is a screenshot of the dynamic layout that we created with the above XAML code.
You can repeat these above steps in the same way for rows. But than in the Grid.RowDefinitions. If you want to add a control to a specific row in your grid you should add the Grid.Row property to your control to define the row where you want your control to appear.
In a later post I will talk about a more complex dynamic layout and how you can measure the width/height of the columns/rows that are created with the * option. Also we will have a look at how work with these kind of layouts from the code behind.
