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.

Spanning Rows and Columns

There are some situations where you will not want controls to fit perfectly within a single cell but where you do want to maintain the integrity of the grid and the alignment it brings to its child controls. Using the ColumnSpan and RowSpan attached properties, you can cause individual controls to fill more than one cell.

The ColumnSpan property should be set to an integer value that is greater than one. This indicates the number of cells that should be spanned. Similarly, RowSpan extends the height of a control downwards into extra table cells.

The following XAML places three buttons in a grid with three columns and four rows. The first child control spans two rows. The second spans two columns. The final button uses row and column spanning to fill four cells.

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

    <Button Grid.Row="1"
            Grid.RowSpan="2"
            Content="Tall Button"/>

    <Button Grid.ColumnSpan="2"
            Content="Wide Button"/>

    <Button Grid.Column="1"
            Grid.Row="2"
            Grid.ColumnSpan="2"
            Grid.RowSpan="2"
            Content="Large Button"/>
</Grid>

The resultant window appears as follows:

WPF Grid Column and Row Spanning

Displaying Grid Lines

The last property that we'll look at for the Grid control is ShowGridLines. By default, this is set to false. If you change the value to true by adding an attribute to the main Grid element, the dividing lines between the grid cells are rendered. You can use this for display purposes in your application. It is also useful when you have a layout bug; you can temporarily switch on grid lines to see exactly how the columns and rows are being sized and which cells controls are using.

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

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

The above XAML adds grid lines and some other properties to give the following results:

WPF Grid with Grid Lines

11 March 2013