Posted by: Zeeshan Amjad | December 25, 2009

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=""
  3:     xmlns:x=""
  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>

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.



  1. […] […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: