WPF GridSplitter control in VB.NET

In this article we will learn how to use GridSplitter control in WPF using VB.NET.
  • 3271

In this article we will learn how to use GridSplitter control in WPF 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

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


 

GS.gif
 

Figure 1.
 

 

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


 

GS2.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

 

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

    <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" />

        <GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"

        Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True"Background="Red" 
BorderThickness
="2" />

        <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>

</Window>

 

Now click on the design Button. The form looks like this.


 

GS3.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.


 

GS4.gif 

Figure 4.

 

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


 

GS5.gif 

Figure 5.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.