WPF resize portion of GUI with seperator

Question

I'm creating a WPF GUI and I would like to have a section that I can manually resize the width, similar to the way most IDEs have explorers and toolboxes that you can resize.

Currently I am using a DockPaneland my project looks similar to the image below. How would I go about including some selectable separator that can change the width of one section of my DockPanel. Are their WPF XAML components, such as separators, capable of doing this already?

Answer 1

Grid and GridSplitter - the resize behaviour and alignment stretches on the Grid Splitter are little gotchas so worth an example:

<Window x:Class="GridSplitSpike.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <ContentControl Name="LeftHandArea" Grid.Column="0" MinWidth="100"/>

    <GridSplitter Grid.Column="1" ResizeBehavior="PreviousAndNext" VerticalAlignment="Stretch" Width="4" />

    <DockPanel Grid.Column="2"/>
</Grid>
</Window>

I should point out that the ContentControl just represents your left hand view. This would no longer be part of the DockPanel.