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>