Posted by: Zeeshan Amjad | December 27, 2009

Nested GridSplitter


We have already seen the example of using GridSplitter. Now we are going to see how we can make the nested grid splitter. Here is a class diagram of grid splitter.

GridSplitter

If we are going to make nested grid splitter then we can make nested grid layout. Here is a XAML to make nested grid splitter.

  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="Nested GridSplitter" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition Height="Auto"/>
  9:             <RowDefinition/>
 10:         </Grid.RowDefinitions>
 11:         <GridSplitter Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Background="LightGray"
 12:                       Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
 13:         <Grid Grid.Column="0" Grid.Row="0">
 14:             <Grid.ColumnDefinitions>
 15:                 <ColumnDefinition/>
 16:                 <ColumnDefinition Width="Auto"/>
 17:                 <ColumnDefinition/>
 18:             </Grid.ColumnDefinitions>
 19:             <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Background="LightGray"
 20:                       Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
 21:             <Rectangle Grid.Column="0" Margin="5" Fill="Red"/>
 22:             <Rectangle Grid.Column="2" Margin="5" Fill="Blue"/>
 23:         </Grid>
 24:         <Rectangle Grid.Column="0" Grid.Row="3" Margin="5" Fill="Green"/>
 25:     </Grid>
 26: </Window>
 27: 

Here is the output of this program.

GridSplitterOutput_03

Advertisements

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: