Edit

Share via

How to: Resize Rows with a GridSplitter

  • Article

This example shows how to use a horizontal GridSplitter to redistribute the space between two rows in a Grid without changing the dimensions of the Grid.

Example

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

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

The following example shows how to define a horizontal GridSplitter that resizes adjacent rows.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

A GridSplitter that does not occupy its own row 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 row

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

The following example shows how to define a horizontal GridSplitter that occupies a row and resizes the rows on either side of it.

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

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

See also