In your WPF projects you can add a grid with a grid splitter. What is a grid splitter? This is a UI element that allows the user to resize adjacent grid columns or rows. When the user hovers the mouse over the grid splitter, which appears as a line, they will see the mouse pointer change to a short line with an arrowhead on each end. They can then click and drag the grid splitter. The programmer creates a grid splitter by adding it to a column or a row in a Grid, with the proper amount of space for it, e.g. 5 pixels. The grid splitter occupies its own row or column.

Here are two screenshots and the XAML code.

Here is the XAML code.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <!-- the row definition is not needed/redundant because the default is one row.-->
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Background="Aqua" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center" 
                Visibility="Visible"  TextWrapping="Wrap">Left side , column 0</TextBlock>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
    <TextBlock Background="LightGreen" Grid.Column="2" FontSize="25" HorizontalAlignment="Center" 
                VerticalAlignment="Center" TextWrapping="Wrap">Right side, column 2</TextBlock>
</Grid>

There are three columns. The grid splitter is in the second column. Column numbering is zero-based. THerefor the middle column, where the grid splitter is located, is column 1, as you can see in the above code GridSplitter Grid.Column=”1″.

Horizontal Alignment

In the above example, the horizontal alignment was set to Stretch. There are two other possible settings: Left and Right. If it is set to “Left”, then the user may only move it to the left. Both the left and right side move and the center “opens up”. Here is a screenshot of what happens when the user moves the splitter to the left and makes the window a bit bigger.

Horizontal or Vertical

Your grid splitter may be horizontal or vertical, even though we’ve only shown a vertical splitter in this post.