How to: Resize Rows with a GridSplitter
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. For the complete sample, see GridSplitter Resizing Rows and Columns Sample.
<GridSplitter Grid.Row="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
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 How to: 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. For the complete sample, see GridSplitter Resizing Rows and Columns Sample.
<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"/>