Virtual Realm

WPF Interface Design - GridSplitter

Saturday, April 04 2009 - wpf

Over the last few days I have been playing around with a few ideas for some applications, most of them are LOB Applications. During this time I have been toying with the idea of using different technologies for the Interface, do I use Windows Forms, ASP.Net, Silverlight or WPF. In the end I have have started to play with WPF for these applications.

The first thing I needed to do was to get used to the design of the Interface and its tools. One thing that I would need would be a way to break up the main interface and allow the user to expand the different sections of the display depending on their preference. For this I have started to look at the GridSplitter control.

I thought I would post about the process to add the GridSplitter to the interface.

First start with a basic Windows WPF Application and separate the grid into 2 columns and 2 rows.

Here is the XAML for the Window.

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

The above code will lay out the application for you and allow you to drop your controls into the different sections of the grid. But to add the GridSplitters to the code you need to add extra rows and columns to the grid to house the Splitters.

This is how I added the Splitters to the Application. First I add the extra rows and Columns to the Grid by changing the Definitions to look like the following.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"></ColumnDefinition>
    <ColumnDefinition Width="3"></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="3"></RowDefinition>
    <RowDefinition></RowDefinition>
</Grid.RowDefinitions>

Next Add 2 GridSplitters to the code.

<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<GridSplitter Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

With the above code the GridSplitters are added to the Application. The code will add the Splitters to the extra rows and columns that we added and align them to fill the spaces. Remember when using the numbers to select the rows or columns that the system uses 0 as the first and increments from there on.

If you run the application now you will be able to adjust the width and height of the different segments of the application. For the purpose of my application I need to have both of the rows on the left combined. Think of it like the tree view in the MMC Application or the tree in an explorer window.

To do this change the first GridSplitter Control to look like the following.

<GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

Adding the Grid.RowSpan item to the control will make the GridSplitter span across all rows in the Grid. If you run the application now you will see that we now have an application separated into 3 different sections, and you are able to change the size of each of the sections.