How to Use a Gridsplitter in WPF

This article will demonstrate how to set up a WPF Gridsplitter in XAML using Microsoft Visual Studio 2008. I apologize for the poor formatting of the XAML, but eHow does not have any support for formatting code. Copy the code into your editor and replace all occurrences of < with < to view the code properly. This article assumes that the reader already knows how to use the WPF Grid control. The resources section below contains links to WPF books that I would recommend.

Difficulty:

Easy

Instructions

Things You'll Need

• Microsoft Visual Studio 2008

1. Code for Step 1

   Create a WPF application in Visual Studio 2008 and set up a Grid with one row and two columns. Then place a text block in each grid cell. The XAML should look something like this:

   <Window x:Class="GridsplitterSample.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="GridSplitter Sample" Height="300" Width="300">
   <Grid>
   <Grid.RowDefinitions>
   <RowDefinition></RowDefinition>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
   <ColumnDefinition></ColumnDefinition>
   <ColumnDefinition></ColumnDefinition>
   </Grid.ColumnDefinitions>

   <TextBlock Grid.Row="0" Grid.Column="0" Background="LightGray" Margin="0 0 4 0">Block 1</TextBlock>
   <TextBlock Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="LightGreen">Block 2</TextBlock>
   </Grid>
   </Window>

2. Code for Step 2

   Add a Gridsplitter. This can be done in one of two ways. The first technique is to create a separate column or row dedicated to the Gridsplitter. The second technique is to add the Gridsplitter to an existing column. This article will demonstrate using the second technique. Adding a Gridsplitter this way only requires a single line of XAML:

   <GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>

   The horizontalAlignment property controls which side of the column the splitter appears on.

3. Gridsplitter hidden by TextBlock

   Notice that you cannot see the splitter when you run the application. This is because the TextBlock is the full width of the column and is rendered in front of the splitter.

4. Know that one way to fix this problem would be to change the z-order of the controls either by putting the GridSplitter after the TextBlock or by explicitly setting the ZIndex property. The flaw with this approach is that the GridSplitter would obscure the right edge of the TextBlock.

5. Final code

   Fix this the correct way by setting a margin on the right side of the text block so that there is room for the Gridsplitter to co-exist with the TextBlock in the column. The final code looks like this:

   <Window x:Class="GridsplitterSample.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="GridSplitter Sample" Height="300" Width="300">
   <Grid>
   <Grid.RowDefinitions>
   <RowDefinition></RowDefinition>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
   <ColumnDefinition></ColumnDefinition>
   <ColumnDefinition></ColumnDefinition>
   </Grid.ColumnDefinitions>

   <GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>
   <TextBlock Grid.Row="0" Grid.Column="0" Margin="0 0 4 0" Background="LightGray">Text Block</TextBlock>
   <TextBlock Grid.Row="0" Grid.Column="1" Background="LightGreen">Text Block 2</TextBlock>
   </Grid>
   </Window>

6. Application with working splitter

   Run the application and see two text blocks and a splitter that will let you resize them.

Resources

• Pro WPF in C# 2008: Windows Presentation Foundation with .NET 3.5, Second Edition
• WPF in Action with Visual Studio 2008
• Programming WPF