In this article we will learn how to use GridSplitter control in Silverlight 4 using VB.NET.
GridSplitter control
The GridSplitter control is a control that allows the user to resize dynamically(Run time) the width or height of the Grid cells.
Creating GridSplitter control in XAML
<sdk:GridSplitter Grid.RowSpan="2" Height="100" HorizontalAlignment="Left" Margin="10,10,0,0"Name="GridSplitter1"
VerticalAlignment="Top" Width="10" />
The Width and Height property represents the width and the height of the control. Name property represents name of the control. The GridSplitter control looks like this.
Figure 1
Properties - This control has the following properties. Property window looks like this.
Figure 2.
For example
We will now add 2 GridSplitter controls; one for horizontal splitting and one for vertical splitting and set the below define XAML property.
XAML code
<Grid ShowGridLines="True" Canvas.Top="60" Canvas.Left="20" Width="442" Height="360">
<Grid.RowDefinitions>
<RowDefinition Height="117*" />
<RowDefinition Height="123*" />
<RowDefinition Height="120*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="One!" FontSize="32" Foreground="DarkRed" />
<TextBlock Text="Two!" Grid.Row="1" Grid.Column="1" Foreground="Blue" FontSize="32" />
<TextBlock Text="Three!" Grid.Row="2" Grid.Column="2" Foreground="GreenYellow"FontSize="32" />
<sdk:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"
ShowsPreview="True" Background="Red" BorderThickness="2" />
<sdk:GridSplitter Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"
Width="5" HorizontalAlignment="Left" VerticalAlignment="Stretch"ShowsPreview="False" Background=
"SpringGreen" FontSize="15" BorderThickness="2,2,2,0" />
<Rectangle Height="117" HorizontalAlignment="Left" Name="Rectangle1" Stroke="Black"StrokeThickness=
"1" VerticalAlignment="Top" Width="147" Fill="Blue" Grid.Column="1" />
<Rectangle Height="117" HorizontalAlignment="Left" Margin="0,6,0,0" Name="Rectangle2"Stroke=
"Black" StrokeThickness="1" VerticalAlignment="Top" Width="147" Grid.Row="1"Fill="DarkMagenta" />
<Rectangle Height="120" HorizontalAlignment="Left" Name="Rectangle3" Stroke="Black"StrokeThickness=
"1" VerticalAlignment="Top" Width="141" Grid.Column="1" Grid.Row="2" Fill="Black"Margin="6,0,0,0" />
<Rectangle Height="117" HorizontalAlignment="Left" Margin="0,6,0,0" Name="Rectangle4"Stroke=
"Black" StrokeThickness="1" VerticalAlignment="Top" Width="141" Grid.Column="2"Grid.Row="1" Fill="DarkOrange" />
<Rectangle Height="117" HorizontalAlignment="Left" Name="Rectangle5" Stroke="Black"StrokeThickness=
"1" VerticalAlignment="Bottom" Width="141" Grid.Column="2" Fill="Aqua" />
<Rectangle Height="120" HorizontalAlignment="Left" Name="Rectangle6" Stroke="Black"StrokeThickness=
"1" VerticalAlignment="Top" Width="147" Grid.Row="2" Fill="DarkGoldenrod" />
</Grid>
Now click on the design Button. The form looks like this.
Figure 3.
In the above figure 2 green and red line shows GridSplitter.
Now run the application and resize the width and height of the grid by green Gridsplitter.
Figure 4.
Now resize the width and height of the grid by red Gridsplitter.
Figure 5.