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);
    }
}

Answer 2

The other solution is put the grid splitter in the same column you want to resize behind its content and set margin to the content. See this link for reference solution: http://www.ehow.com/how_4546867_use-gridsplitter-wpf.html

    <Grid>
     <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
      <ColumnDefinition></ColumnDefinition>
      <ColumnDefinition></ColumnDefinition>
     </Grid.ColumnDefinitions>

     <GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>
     <TextBlock Grid.Row="0" Grid.Column="0" Margin="0 0 4 0" Background="LightGray">Text Block</TextBlock>
     <TextBlock Grid.Row="0" Grid.Column="1" Background="LightGreen">Text Block 2</TextBlock>
     </Grid>

Read more: How to Use a Gridsplitter in WPF | eHow.com http://www.ehow.com/how_4546867_use-gridsplitter-wpf.html#ixzz1mXqi6sGa