如何让DockPanel内的Grid填充全部空间，支持折叠自适应？

原有实现及问题 #

现有布局代码如下：

<Grid Margin="2.0cm, 2.0cm, 1.5cm, 0.5cm" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    <DockPanel VerticalAlignment="Stretch" Grid.Row="1" Background="Red">
        <Grid Height="100" DockPanel.Dock="Top" Background="Blue"/>
        <Grid Height="100" DockPanel.Dock="Bottom" Background="Yellow"/>
    </DockPanel>
</Grid>

该实现运行后，蓝色和黄色Grid各占固定100高度，中间会露出红色的DockPanel背景，不符合预期。

需求说明 #

• 蓝色Grid填充黄色Grid上方的所有剩余空间，黄色Grid固定停靠在底部，完全不露出DockPanel的红色背景
• 当黄色Grid设置为Collapsed隐藏状态时，蓝色Grid可以自动填充满整个父容器的可用空间
• 此前尝试直接设置VerticalAlignment="Stretch"未达到预期效果，甚至出现Grid无法显示的问题

解决方案 #

采用Grid行定义的自适应高度规则实现需求，代码如下：

<Grid Margin="2.0cm, 2.0cm, 1.5cm, 0.5cm" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    <Grid.RowDefinitions>
        <!-- 第一行占满所有剩余空间 -->
        <RowDefinition Height="*"/>
        <!-- 第二行高度自适应内容高度 -->
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <!-- 上方蓝色区域，占满第一行所有空间 -->
    <Grid Background="Blue" Grid.Row="0" VerticalAlignment="Stretch"/>
    <!-- 底部黄色区域，固定100高度，隐藏时第二行高度自动归零，上方蓝色区域自动扩展 -->
    <Grid Background="Yellow" Grid.Row="1" Height="100" Visibility="Visible"/>
</Grid>

注：原示例解决方案代码中蓝黄区域的行索引写反，已按照需求逻辑调整为正确顺序

内容的提问来源于stack exchange，提问作者Álvaro García