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.

    NoteNote

    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.

    NoteNote

    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.

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>
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft