WPF Grid - Auto sized column not collapsing when content Visibility set to Visibility.Collapsed

Question

I have the following simpl WPf grid, two columns, a button in each column, the first column auto sized and a splitter to allow column resizing. An event handler is set up on the splitter MouseDoubleclick event. When the splitter is doulble clicked the button in the left column is collapsed.

Now, as column 1 is auto sized and the content is collapsed I would expect at this point that column 1 should effectively be hidden, however it is not. Although its content is collapsed the column size does not change (remeber column is autosized).

Seems strange to me, I'd like the column to collapse - any idea what's happening here?

<Window x:Class="KingLayout.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button x:Name="leftButton">Left</Button>
        <Button Grid.Column="1" Margin="5,0,0,0">Right</Button>
        <GridSplitter Name="verticalSplitter" ShowsPreview="True" Grid.RowSpan="1" Grid.Column="1" HorizontalAlignment="Left"
                      VerticalAlignment="Stretch" Width="5" MouseDoubleClick="verticalSplitter_MouseDoubleClick"/>
    </Grid>
</Window>


    private void verticalSplitter_MouseDoubleClick(object sender, MouseButtonEventArgs e)
    {
        leftButton.Visibility = leftButton.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
    }

Answer 1

What's happening is that when you resize the column/row width/height with the GridSplitter, it sets the ActualHeight (or ActualWidth) of the column/row.

You should use a trigger to set row's height to auto (or zero) when your control is collapsed.

Get me updated with this.

Answer 2

In my case, I was able to use StackPanels and setting the Visibility="Collapsed" which caused it to properly resize.

<StackPanel Orientation="Vertical" Margin="5">
    <StackPanel Orientation="Horizontal">
      <!-- Some controls -->
    </StackPanel>
    <StackPanel Orientation="Horizontal" Visibility="{Binding YourVisibilityProperty}">
      <!-- Some controls -->
    </StackPanel>
</StackPanel>

Answer 3

It's because the splitter keeps its position in the grid, it pulls the first column, why don't you try an expander?

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Expander ExpandDirection="Left">
        <Button x:Name="leftButton">Left</Button>
    </Expander>
    <Button Grid.Column="1" Margin="5,0,0,0">Right</Button>
</Grid>