Why does my GridSplitter not work at all? - wpf

Question

I'm migrating a WinForms app to WPF. Everything has gone well so far except in relation to my attempts to use GridSplitter which I can never seam to make resize anything at run-time.
To make sure it wasn't just my code I attempted to compile the GridSplitter sample from LearnWPF.com and it doesn't appear to work either. I am expecting to see the standard resize cursor when I mouse over the splitter which doesn't happen, and as far as I can see there is no other visual representation of the splitter in the window either.
What am I missing here?
<Window x:Class="UI.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="300" Width="300">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Background="#feca00" Grid.Column="0">
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter/>
<Border CornerRadius="10" BorderBrush="#58290A"
BorderThickness="5" Grid.Column="1">
<TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
TextWrapping="Wrap">Right Hand Side</TextBlock>
</Border>
</Grid>

Answer 1

In your example, GridSplitter is being placed in the first column. I don't remember my WPF alignment rules off the top of my head, but I think it's probably being placed on the left side of the first column. Not really what you wanted.
It is much easier to make a GridSplitter occupy a row or column, than to try and share a row or column with other controls.
<Window x:Class="UI.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="300" Width="300">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#feca00">
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">
Left Hand Side
</TextBlock>
</StackPanel>
<GridSplitter
Width="4"
Grid.Column="1"
Background="Red"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"/>
<Border
Grid.Column="2"
BorderBrush="#58290A"
BorderThickness="5"
CornerRadius="10">
<TextBlock FontSize="25" Foreground="#FECA00" TextWrapping="Wrap">
Right Hand Side
</TextBlock>
</Border>
</Grid>
</Grid>
</Window>

Answer 2

You're missing important concept of Z-Ordering. Controls are placed in the z-order in the order you list them. Basically, your grid splitter is being covered up by the last column. If you place the Grid Splitter over the last column in the z-order, it should work just fine without requiring an extra column:
<Window x:Class="UI.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="300" Width="300">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Background="#feca00" Grid.Column="0">
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<Border CornerRadius="10" BorderBrush="#58290A" BorderThickness="5" Grid.Column="1">
<TextBlock FontSize="25" Margin="20" Foreground="#FECA00" TextWrapping="Wrap">Right Hand Side</TextBlock>
</Border>
<GridSplitter Grid.Column="1"/>
</Grid>
</Grid>