Introduction
To use the GridSplitter you should be familiar with the Grid control. It is a control that allows the user to resize dynamically the width or height of the Grid cells.
See also:
Grid Article
Overview
The following example demonstrates how to use the GridSplitter:
We want to have two cells whose width can be redistributed. The blue line can be moved left or right when clicking on it, holding the mouse button and dragging. Thus the neighbor cells can be resized.
The XAML code:
<UserControl
xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
x:Class="GridSplitter2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400" Height="300">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<basics:GridSplitter x:Name="grsplSplitter" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Aqua" Width="5"></basics:GridSplitter>
</Grid>
</UserControl>
Note: you can use a Brush object as a Background property.
Note that the GridSplitter is located in the middle column but not between the columns. It has its own size and the middle column is marked with Width="Auto" to take exactly the width of the GridSplitter. You can add same space around the splitter setting different width of the column holding it. For example:
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="25"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
Here the MinWidth and MaxWidth of the Grid columns become useful. You can restrict the GridSplitter by setting for example the following:
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" MaxWidth="250" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
Thus the splitter will continue to work in the same way but you will be able to move it within the width of column – in the above example within 50 and 250 pixels.
You can use the same technique to resize the Height of Grid rows. I won’t describe it in details. I’ll give just an example:
<UserControl
xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
x:Class="GridSplitter2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400" Height="300">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<basics:GridSplitter x:Name="grsplSplitter" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Aqua" Height="5"></basics:GridSplitter>
</Grid>
</UserControl>
You can read more about the GridSplitter properties and the dependencies between them at: http://msdn2.microsoft.com/en-us/library/system.windows.controls.gridsplitter(VS.95).aspx
One useful property is the ShowsPreview. When it is set to True and you are moving the mouse only a preview is shown and the splitter is not moving. When the left button is released then the splitter moves.
<basics:GridSplitter ShowsPreview="True" x:Name="grsplSplitter" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Aqua" Width="5"></basics:GridSplitter>
You can customize the Style of the preview using the PreviewStyle property.
Conclusion
This article is just a brief description of the key features of the GridSplitter control. It targets the developer who has just started with the new Silverlight 2 controls. Any comments are welcome.
Reference
http://msdn2.microsoft.com/en-us/library/system.windows.controls.gridsplitter(VS.95).aspx