Collapse Control under a GridSplitter - Unwanted White space appears

Question

Given the following XAML;

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="100"/>
        <RowDefinition Height="2"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="0"
            Background="LightBlue">
        <Button Height="30"
                Click="Button_Click">Hide Lower Panel</Button>
    </Border>
    <GridSplitter Grid.Row="1"
                  ResizeDirection="Rows" 
                  Width="Auto"
                  HorizontalAlignment="Stretch"
                  Margin="0"
                  x:Name="Splitter"/>
    <Border Grid.Row="2"
            Background="LightCoral"
            x:Name="LowerPanel" MinHeight="25"/>
</Grid>

Where Button_Click is;

this.LowerPanel.Visibility = this.LowerPanel.Visibility == Visibility.Visible 
    ? Visibility.Collapsed 
    : Visibility.Visible;

This looks like this;

If the button is clicked before doing anything else, then it collapses as expected;

However, if I resize using the grid splitter..

Then when I press the button, the following happens;

Is there any way to make the lower element collapse correctly again after it has been resized?

Note: for the purposes of this question I've just used code-behind event handers and a button to trigger this, but in real-life it's done in the proper MVVM way with the visibility being determined by a bound property on the view model.

Answer 1

AFAIK, when GridSplitter is used, its rewrites the Height or Width properties of the corresponding RowDefinitions and ColumnDefinitions. In order to do what you want, you should to play with RowDefinitions.Height property, like this:

public MainWindow()
{
    InitializeComponent();
    //gr is the name of the Grid
    basepr1 = gr.RowDefinitions[0].Height;
    basepr2 = gr.RowDefinitions[2].Height;
}
static GridLength zero = new GridLength(0);
GridLength basepr1;
GridLength basepr2;
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (this.LowerPanel.Visibility == Visibility.Visible)
    {
        this.LowerPanel.Visibility = Visibility.Collapsed;
        basepr2 = gr.RowDefinitions[2].Height; // remember previos height
        gr.RowDefinitions[2].Height = zero;
    }
    else
    {
        this.LowerPanel.Visibility = Visibility.Visible;
        gr.RowDefinitions[2].Height = basepr2;
    }
}