Using GridSplitter

We can use GridSplitter to simulate the splitter behavior. This class is inherited by Thumb class. Here is a class diagram of GridSplitter class.

It is important to note that GridSplitter class can only be used inside the Grid layout. We can’t use this class with any other layout. Here is one simple program to demonstrate the usage of GridSplitter class. Here we create two splitters one horizontally and one vertically. Here is a simple XAML code to show the usage of GridSplitter.

  1: <Window x:Class="WpfGridSplitter.Window1"

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

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

  4:     Title="GridSplitter" Height="300" Width="300">

  5:     <Grid>

  6:         <Grid.RowDefinitions>

  7:             <RowDefinition/>

  8:             <RowDefinition Height="Auto"/>

  9:             <RowDefinition/>

 10:         </Grid.RowDefinitions>

 11:         <Grid.ColumnDefinitions>

 12:             <ColumnDefinition/>

 13:             <ColumnDefinition Width="Auto"/>

 14:             <ColumnDefinition/>

 15:         </Grid.ColumnDefinitions>

 16:         <GridSplitter Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Background="LightGray"

 17:                       Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

 18:         <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Background="LightGray"

 19:                       Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

 20:         <Rectangle Grid.Column="0" Grid.Row="0" Margin="5" Fill="Red"/>

 21:         <Rectangle Grid.Column="3" Grid.Row="0" Margin="5" Fill="Blue"/>

 22:         <Rectangle Grid.Column="0" Grid.Row="3" Margin="5" Fill="Green"/>

 23:         <Rectangle Grid.Column="3" Grid.Row="3" Margin="5" Fill="Yellow"/>

 24:     </Grid>

 25: </Window>

 26: 
Here is the output of this program.
 

Here we can resize splitter both horizontally and vertically. Here is the output of the program if we resize the splitter.