Gridsplitter behaviour when hiding a WPF grid column

Question

I'm pretty new to WPF, so please excuse me if this is 'old hat' these days... have trawled the web/forum and haven't quite found the answer I need:

I have a WPF grid with 5 columns - three for data, two for gridsplitters, which (thanks to info on this site!) seems to work and resize fine. However - I need to be able to show/hide the middle column. I can sort-of do this, but when I hide the middle column, the left hand gridsplitter still affects the "hidden" column - I need to effectively toggle between 2 & three colums. Here's my (prototype) code:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Name="Col0" Width="*" />
        <ColumnDefinition Name="Col1" Width="auto" />
        <ColumnDefinition Name="Col2" Width="*" />
        <ColumnDefinition Name="Col3" Width="auto" />
        <ColumnDefinition Name="Col4" Width="auto" />
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1" Height="100" HorizontalAlignment="Center" Margin="0" Name="GridSplitter1" VerticalAlignment="Stretch" Width="3" />
    <GridSplitter Grid.Column="3" Height="100" HorizontalAlignment="Center" Margin="0" Name="GridSplitter2" VerticalAlignment="Stretch" Width="3" />
    <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="0" HorizontalAlignment="Stretch" Margin="0" Name="Border1" VerticalAlignment="Stretch" Background="#FFC84797" />
    <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="2" HorizontalAlignment="Stretch" Margin="0" Name="Border2" VerticalAlignment="Stretch" Background="Black" />
    <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="4" HorizontalAlignment="Stretch" Margin="0" Name="Border3" VerticalAlignment="Stretch" Background="#FFA60000">
        <Button Content="hide" Height="33" Name="butHide" Width="85" />
    </Border>
</Grid>

Private Sub butHide_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles butHide.Click

    If butHide.Content = "hide" Then

        butHide.Content = "show"
        Col2.Width = New GridLength(0)
        Border2.Visibility = System.Windows.Visibility.Collapsed
        GridSplitter2.Visibility = System.Windows.Visibility.Collapsed

    Else()

        butHide.Content = "hide"
        Col2.Width = New GridLength(1, GridUnitType.Star)
        Border2.Visibility = System.Windows.Visibility.Visible
        GridSplitter2.Visibility = System.Windows.Visibility.Visible

    End If
End Sub

Answer 1

Probably the easiest thing for you here is just to set Grid.ZIndex="2" for Border1 and then toggle the ColumnSpan between 1 and 3 in the click event.

<Border Grid.Column="0"
        Grid.ZIndex="2"
        Name="Border1"
        .../>

Code behind

private void butHide_Click(object sender, RoutedEventArgs e)
{
    if (butHide.Content.ToString() == "hide")
    {
        butHide.Content = "show";
        Grid.SetColumnSpan(Border1, 3);
    }
    else
    {
        butHide.Content = "hide";
        Grid.SetColumnSpan(Border1, 1);
    }
}