Export (0) Print
Expand All

How to: Create User-Resizable Applications with GridSplitter

Silverlight

You can use the GridSplitter control in conjunction with the Grid container control to create 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. This topic lists some GridSplitter best practices and describes how to create a vertical and a horizontal GridSplitter.

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 run time.

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.

The following steps describe how to create a vertical GridSplitter.

To create a vertical GridSplitter

  1. In Design view, select the Grid.

  2. Add columns to the GridSplitter. For more information, see Alignment in the Silverlight Designer.

    Note 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 first column.

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

    Property

    Value

    Grid.Column

    0

    Grid.RowSpan

    The total number of rows in the Grid.

    Width

    A non-zero number. For example, 10.

    Height

    Auto

    HorizontalAlignment

    Right

    VerticalAlignment

    Stretch

    Margin

    0

  5. In Design view, select the Grid.

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

The following steps describe how to create a horizontal GridSplitter.

To create a horizontal GridSplitter

  1. In Design view, select the Grid.

  2. Add rows to the GridSplitter. For more information, see Alignment in the Silverlight Designer.

    Note 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 top row.

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

    Property

    Value

    Grid.ColumnSpan

    The total number of columns in the Grid.

    Grid.Row

    0

    Width

    Auto

    Height

    A non-zero number. For example, 10.

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Bottom

    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 and vertical GridSplitter.

Run this sample


<Grid x:Name="LayoutRoot" Background="White"  Height="400" Width="400" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="80" />
    </Grid.ColumnDefinitions>
    <sdk:GridSplitter Grid.Column="0" Grid.RowSpan="5" Width="10"  HorizontalAlignment="Right" VerticalAlignment="Stretch"   />
    <sdk:GridSplitter Grid.Row="0" Grid.ColumnSpan="4" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />
    <Rectangle Grid.Column="1" Fill="LightCoral"  />
    <Rectangle Grid.Row="1" Fill="LightBlue" />
  </Grid>


Community Additions

ADD
Show:
© 2014 Microsoft