How to: Create User-Resizable Applications with GridSplitter

You can use the GridSplitter control in conjunction with the Grid container control to create window layouts that are resizable by the user at run time. For example, in an application that has a UI divided into areas, the user can drag a splitter to make an area larger, depending on what the user wants to see more of.

When you add a GridSplitter control to a Grid, it is a child of the grid control and must be positioned in a row and a column like any other child control. The GridSplitter must have a non-zero width or height, so that the user can grab and drag it at runtime.

Some best practices for GridSplitter include the following:

• Put the GridSplitter in a dedicated row or column that does not contain any other controls.

• Set the height of the row or the width of the column that contains the GridSplitter to Auto.

• Dedicate a single Grid to the GridSplitter. Add additional container panels to the Grid to complete the layout.

To create a vertical GridSplitter

1. In Design view, select the Grid. For more information, see How to: Select and Move Elements on the Design Surface.

2. Add a column where you want the GridSplitter to appear. For more information, see How to: Add Rows and Columns to a Grid.

   Note

   In some cases, it might be difficult to position rows and columns in the designer. In that case, you can configure the Grid by using the XAML editor. See the example section at the end of this topic for sample XAML markup.

3. From the Toolbox, drag a GridSplitter control into the added column.

4. In the Properties window, set the following properties for the GridSplitter:

   Property	Value	Possible Values
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columns	Auto Column Rows
   Grid.Column	The column in which you want the GridSplitter. (Column numbers are zero-based.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	The total number of rows in the Grid.
   Width	A non-zero number. For example, 10.
   Height	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In Design view, select the Grid.

6. Set the Width of the ColumnDefinition that contains the GridSplitter to Auto.

To create a horizontal GridSplitter

1. In Design view, select the Grid. For more information, see How to: Select and Move Elements on the Design Surface.

2. Add a row where you want the GridSplitter to appear. For more information, see How to: Add Rows and Columns to a Grid.

   Note

   In some cases, it might be difficult to position rows and columns in the designer. In that case, you can configure the Grid by using the XAML editor. See the example section at the end of this topic for sample XAML markup.

3. From the Toolbox, drag a GridSplitter control into the added row.

4. In the Properties window, set the following properties for the GridSplitter:

   Property	Value	Possible Values
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Column Rows
   Grid.Column	0
   Grid.ColumnSpan	The total number of columns in the Grid.
   Grid.Row	The row in which you want the GridSplitter. (Row numbers are zero-based.)
   Grid.RowSpan	1
   Width	Auto
   Height	A non-zero number. For example, 10.
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In Design view, select the Grid.

6. Set the Height of the RowDefinition that contains the GridSplitter to Auto.

Example

The following XAML creates a horizontal GridSplitter:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

See Also

Tasks

Walkthrough: Creating a Resizable Application by Using the WPF Designer

Reference

GridSplitter

Other Resources

Layouts in the WPF Designer

GridSplitter