How to: Remove Rows and Columns from a Grid

  • Article

The Windows Presentation Foundation (WPF) Grid control enables you to easily position and align controls by creating grid-based layouts. At design time, you can remove rows and columns from a Grid control in the Windows Presentation Foundation (WPF) Designer for Visual Studio.

When you delete a row or a column, you must reposition any controls that were in that row or column. You can do this by modifying the Grid.Row or Grid.Column properties of the affected controls.

This topic discusses three ways that you can delete rows and columns from a Grid. For information about how to add rows and columns to a grid, see How to: Add Rows and Columns to a Grid.

Using the Designer

Starting in Visual Studio 2008 SP1, you can remove existing rows and columns from a Grid control in Design view.

To delete rows and columns from a grid by using the designer

  1. In the WPF Designer, select a Grid control that has at least two columns or two rows.

  2. Move the pointer over a gridline indicator in the grid rail.

    The gridline indicator turns orange and the mouse pointer changes to indicate repositioning.

  3. Drag the gridline indicator off the grid.

    When you click, the gridline and the gridline indicator turn red. Once you have dragged off the grid, your mouse pointer changes and includes an X to indicate deletion.

  4. Release the mouse button.

    The gridline and its corresponding row or column is removed. The properties of the remaining rows and columns are updated appropriately.

Using the Collection Editor

You can delete rows and columns from 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 delete rows from 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. In the left pane click the RowDefinition that you want to delete.

  4. Click Remove item to delete the row.

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

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

To delete columns from 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. In the left pane click the ColumnDefinition that you want to delete.

  4. Click Remove item to delete the column.

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

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

Using the XAML Editor

You can also remove rows and columns from a Grid manually by deleting them in the XAML editor. Design view is automatically updated.

To delete rows and columns from a grid by using the XAML editor

  1. In the XAML editor, locate a Grid element that contains rows and columns. The following markup shows an example:

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

  2. Delete the rows and columns that you no longer need.

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

Change History

Date

History

Reason

July 2008

Added steps to delete rows and columns from a grid by using the designer.

SP1 feature change.