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.

GridSplitter

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.

GridSplitterOutput

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

GridSplitterOutput_02

Advertisements

Responses

  1. […] https://zamjad.wordpress.com/2009/12/25/using-gridsplitter/ […]


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Categories

%d bloggers like this: