Share via

How to: Add Rows and Columns to a Grid

  • Article

The Windows Presentation Foundation (WPF) Grid control enables you to quickly and easily position and align controls by creating grid-based layouts. At design time, you can add rows and columns to a Grid control in the WPF Designer. By default, new rows and columns use Star sizing.

Important

If you set the size of a row or column to Auto before you add content to it, you cannot see it in the designer. This can make it hard to position controls in the correct row or column. To avoid this, you can use star sizing while you work, and change to Auto when you are done.

This topic discusses three ways that you can add rows and columns to a Grid. You can also remove rows and columns from a grid. For more information, see How to: Remove Rows and Columns from a Grid.

Using the Designer

In the WPF Designer, when you select a Grid control, rails appear on the top and left sides. You can use the rails to add rows and columns directly on to the Grid. XAML view is automatically updated with the new rows and columns.

Note

If the FlowDirection property is set to RightToLeft, the rail for the rows appears on the right side of the Grid.

To add rows to a grid by using the designer

  1. In the WPF Designer, select a Grid control.

  2. Move the pointer over the outer edge of the side rail. The pointer changes to cross hairs and a gridline appears indicating where the row will be added.

  3. Click the rail to set the row.

    The gridline is fixed in place and a gridline indicator appears in the rail at the end of the gridline.

    Tip

    You can adjust the size of the row by dragging the gridline inside the grid or the gridline indicator in the rail.

  4. (Optional) Repeat steps 2 and 3 to add more rows.

To add columns to a grid by using the designer

  1. In the WPF Designer, select a Grid control.

  2. Move the pointer over the top edge of the top rail. The pointer changes to cross hairs and a gridline appears indicating where the column will be added.

  3. Click the rail to set the column.

    The gridline is fixed in place and a gridline indicator appears in the rail at the end of the gridline.

    Tip

    You can adjust the size of the column by dragging the gridline inside the grid or the gridline indicator in the rail.

  4. (Optional) Repeat steps 2 and 3 to add more columns.

Using the Collection Editor

You can also add rows and columns to a Grid by using the collection editor. When you use the collection editor to configure rows and columns, Design view and XAML view are updated automatically.

To add rows to a grid by using the collection editor

  1. In the WPF Designer, select a Grid control.

  2. In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.

    The Collection Editor dialog box appears.

  3. Click Add to add a new row.

  4. (Optional) Set the properties of the row.

  5. (Optional) Repeat steps 3 and 4 to add more rows.

  6. Click OK to close the Collection Editor and return to the WPF Designer.

To add columns to a grid by using the collection editor

  1. In the WPF Designer, select a Grid control.

  2. In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.

    The Collection Editor dialog box appears.

  3. Click Add to add a new column.

  4. (Optional) Set the properties of the column.

  5. (Optional) Repeat steps 3 and 4 to add more columns.

  6. Click OK to close the Collection Editor and return to the WPF Designer.

Using the XAML Editor

You can also add rows and columns to a Grid manually by typing in the XAML editor. Design view is automatically updated with the new rows and columns.

To add rows to a grid by using the XAML editor

  1. In the XAML editor, locate a Grid element.

  2. Add a Grid.RowDefinitions element as a child of the Grid element. The code should look like the following:

    <Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>

  3. Add RowDefinition elements. The following markup shows an example:

    <Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="5*" />
</Grid.RowDefinitions>

To add columns to a grid by using the XAML editor

  1. In the XAML editor, locate a Grid element.

  2. Add a Grid.ColumnDefinitions element as a child of the Grid element. The code should look like the following:

    <Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>

  3. Add ColumnDefinition elements. The following markup shows an example:

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

See Also

Tasks

Walkthrough: Constructing a Dynamic Layout

Concepts

Alignment in the WPF Designer

Layout with Absolute and Dynamic Positioning

Other Resources

WPF Container Controls