.NET 4.0+

WPF Layout Controls - Grid

by Richard Carr, published at http://www.blackwasp.co.uk/WPFGrid.aspx

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.

The Grid

The Grid is possibly the most popular WPF layout control. It allows you to create a flexible, tabular layout of controls aligned in columns and rows. Those columns and rows can be resized automatically as the grid gets larger or smaller, or can be fixed in their dimensions. This style of layout matches that required for many data input forms.

The child controls of a grid are stretched, by default, to perfectly fill a grid cell, though you can change this behaviour by altering a control's alignment properties and margins. If a perfect grid of controls is not desired, you can instruct some controls to span several rows or columns, keeping the overall grid-like layout but adding extra flexibility. You can also embed one grid within a cell of another for a nested set of grids.

Grid Example

Let's create a simple demonstration project that includes a grid. We'll start with the most basic grid layout, which is a grid with no column or row definitions. Such a grid has a single cell. To begin, create a new WPF Application project in Visual Studio named, "GridDemo". Replace the XAML in the automatically added window with that shown below. Note that the grid contains a single button control.

<Window x:Class="GridDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid Demo"
        Height="200"
        Width="250">
    <Grid>
        <Button Content="Click Me!"/>
    </Grid>
</Window>

As mentioned previously, unless you specify otherwise, the child controls of a grid match the size of the cell within which they appear. This is why the button expands to fill the entire grid, which itself fills the window in this case. The output for the above XAML is shown below:

Row and Column Definitions

To configure columns and rows for the grid we need to add some extra properties. Unlike other control properties that we've seen in the WPF tutorial, these values cannot be set with simple string values. Instead, we need to use property element syntax.

Property element syntax is a grand name for a simple concept. In order to specify values for a complex property, we can define that property using its own XML element within the tag of the control to which it applies. Complex properties that require this syntax tend to be those that have many values or that hold collections of inner objects. The latter is the case for row and column definitions. The property element syntax means we can add as many rows and columns to a grid as we desire.

To specify the number of columns we need to add a ColumnDefinitions property. This is added as a new element with the name, "Grid.ColumnDefinitions". The Grid part is required for property element syntax and links the property to the grid. Within the ColumnDefinitions element we then add one ColumnDefinition for each column.

The box below shows the XAML for specifying two columns within a grid. Don't add this to the demo project yet.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="Click Me!"/>
</Grid>

Defining the number of rows in our grid is similar to adding columns. We just use the RowDefinitions element and a number of nested RowDefinitions.

Modify the Grid element in the demo project as follows. This creates a two column, three row grid.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Click Me!"/>
</Grid>

The new layout is shown below. You can see that the button has been placed within the cell at the top left of the grid. Unless you specify the position of a child control it will always be placed in this cell. If you add two controls to a grid without positioning them, they will both appear in the first cell, with one control possibly obscuring the other.