How to: Create User-Resizable Applications with GridSplitter
Microsoft Silverlight will reach end of support after October 2021. Learn more.
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.
Creating a Vertical GridSplitter
The following steps describe how to create a vertical GridSplitter.
To create a vertical GridSplitter
In Design view, select the Grid.
Add columns to the GridSplitter. For more information, see Alignment in the Silverlight Designer.
.gif "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.
From the Toolbox, drag a GridSplitter control into the first column.
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
In Design view, select the Grid.
Set the Width of the ColumnDefinition that contains the GridSplitter to Auto.
Creating a Horizontal GridSplitter
The following steps describe how to create a horizontal GridSplitter.
To create a horizontal GridSplitter
In Design view, select the Grid.
Add rows to the GridSplitter. For more information, see Alignment in the Silverlight Designer.
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.
From the Toolbox, drag a GridSplitter control into the top row.
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
In Design view, select the Grid.
Set the Height of the RowDefinition that contains the GridSplitter to Auto.
Example
The following XAML creates a horizontal and vertical GridSplitter.
<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>
See Also