Allow users to resize Expander in WPF

Question

I have a lot of C# and WinForms experience but am a newbie to WPF. I have a Window with an Expander which expands downward. Much like the question box I'm currently typing in, I'd like users to be able to dynamically resize the Expander by clicking over a glyph at the bottom (like this question box) and dragging the expander to the desired size.

Can anyone provide the XAML (and any additional code) to do this?

This is what I have so far:

<Expander Header="Live Simulations" Name="expandLiveSims" Grid.Row="0" ExpandDirection="Down" IsExpanded="True">
    <Expander.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="LightGray" Offset="0.767" />
            <GradientStop Color="Gainsboro" Offset="1" />
        </LinearGradientBrush>
    </Expander.Background>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <DataGrid Height="250" Margin="5" Name="gridLiveProducts" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0">
        </DataGrid>
        <GridSplitter Grid.Row="0" Grid.Column="1" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center">
            <GridSplitter.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="DarkGray" Offset="0.25" />
                    <GradientStop Color="DarkGray" Offset="0.75" />
                    <GradientStop Color="Gainsboro" Offset="1" /> <!-- Gainsboro matches the expander -->
                </LinearGradientBrush>
            </GridSplitter.Background>
        </GridSplitter>
        <Border Grid.Row="0" Grid.Column="2" Background="White" BorderBrush="Black" BorderThickness="1" Margin="5" >
            <Image Height="250" HorizontalAlignment="Right" Name="imgShares" Stretch="Fill" VerticalAlignment="Top" Width="250">
            </Image>
        </Border>
        <GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="3">
            <GridSplitter.Background>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Gainsboro" Offset="0" />
                    <GradientStop Color="DarkGray" Offset="0.25" />
                    <GradientStop Color="DarkGray" Offset="0.75" />
                    <GradientStop Color="Gainsboro" Offset="1" />
                </LinearGradientBrush>
            </GridSplitter.Background>
        </GridSplitter>
    </Grid>
</Expander>

Answer 1

You have to use Grid with GridSplitter.

Like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Expander Grid.Row="0" Background="Azure"></Expander> <!--this is you Expander-->
    <GridSplitter Grid.Row="1" Height="10" Background="Red" ResizeDirection="Rows" HorizontalAlignment="Stretch"/> <!--this GridSplitter represents the glyph-->
</Grid>

in order to success in this way, the tow gird sides must be Height="*"