BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - Grid

The sixth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the important subject of layout controls. This article examines the WPF Grid layout control, which organises its children into parallel columns and rows.

Positioning Child Controls

It wouldn't be much use if you could not specify within which cell a control should appear. This is actually very easy, just requiring the addition of two attached properties to the child controls. The Column attached property determines the horizontal position of a control. Column zero is the leftmost column, column one is the second column and so on. If the property is omitted the control is placed in column zero.

The Row attached property specifies the row for each control. Row zero is topmost and lower rows have increasing values. Again, the default value of zero is used if the property is not included in a child control. This explains why a control with no positioning appears in the top-left grid cell.

Modify the grid as follows to add six controls, each within its own cell.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Label Content="First Name"/>
    <TextBox Grid.Column="1" x:Name="FirstName"/>
    <Label Grid.Row="1" Content="Last Name"/>
    <TextBox Grid.Row="1" Grid.Column="1" x:Name="LastName"/>
    <Button Grid.Row="2" Content="OK"/>
    <Button Grid.Row="2" Grid.Column="1" Content="Cancel"/>
</Grid>

The resultant window appears as shown below. Note that each control fills its cell, though this is difficult to see for the Labels.

WPF Grid Layout with Children

Column and Row Sizing

There are several ways to set up the column widths and row heights for your grids. The first is to use the Visual Studio designer. This is a visual approach but is not particularly accurate. You should see several small triangular sizing handles positioned at the top or the left of the dividing lines between columns or rows. You can drag these handles to resize columns and rows.

As you drag to resize a row or column the new sizes are displayed. In the image below you can see the column sizes are 46* and 75*. The asterisk character (*) indicates that these are star sizes. We'll come back to these shortly.

WPF Grid Column and Row Resizing in Visual Studio Designer

A more accurate but less visual way to set the column and row dimensions is to edit the XAML directly or use the Properties window to adjust the values. The Properties window includes a rich set of controls for this purpose but we'll stick to using XAML in this article. We'll use the Width property for columns and Height for rows.

Try changing the column and row definitions to those shown in the sample code below. In this case we've set the width of the first column to 100 pixels. The second column has no size so will automatically expand to fill the remaining space in the grid's allocated area. The first and third rows have heights of 50 and 80 pixels respectively. The middle row has no height so will resize to fit the available space.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

The results of the above XAML are shown below. Try launching the demo application to see this. Once running, change the size of the window to see how the columns and rows resize.

WPF Grid Column and Row Pixel Sizes

11 March 2013