Edit

How to: Resize Columns with a GridSplitter

  • Article

This example shows how to create a vertical GridSplitter in order to redistribute the space between two columns in a Grid without changing the dimensions of the Grid.

Example

How to create a GridSplitter that overlays the edge of a column

To specify a GridSplitter that resizes adjacent columns in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows. Then set the HorizontalAlignment property to Left or Right (which alignment you set depends on which two columns you want to resize). Finally, set the VerticalAlignment property to Stretch.

<GridSplitter Grid.Column="1" 
              Grid.RowSpan="3" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="true"
              Width="5"/>

A GridSplitter that does not have its own column may be obscured by other controls in the Grid. For more information about how to prevent this issue, see Make Sure That a GridSplitter Is Visible.

How to create a GridSplitter that occupies a column

To specify a GridSplitter that occupies a column in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows. Then set the HorizontalAlignment to Center, set the VerticalAlignment property to Stretch, and set the Width of the column that contains the GridSplitter to Auto.

The following example shows how to define a vertical GridSplitter that occupies a column and resizes the columns on either side of it.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

See also