Silverlight GridSplitter control in VB.NET

In this article we will learn how to use GridSplitter control in Silverlight 4 using VB.NET.
  • 2202

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.
 


 

           5.gif
 

Figure 1
 

 

Properties - This control has the following properties. Property window looks like this.


 

gs1.gif

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.

 

gs2.gif

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.
 

gs3.gif
 

Figure 4.

Now resize the width and height of the grid by red Gridsplitter.

gs4.gif
 

Figure 5.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.