WPF Grid布局中VerticalAlignment="Top"属性不生效问题

设置VerticalAlignment="Top"不生效是两个默认配置共同导致的：

• 同一行放置的三个区块Grid默认VerticalAlignment为Stretch，会被强制拉伸到和最高的Non-Merchandise区块等高
• 三个区块内部的RowDefinition默认高度为*，会均分所在Grid的总高度，多余的空白空间被均匀分配到每一行，内容自然无法靠顶部显示

只需要改两处配置：

1. 给三个并列的区块Grid都加上VerticalAlignment="Top"，让每个区块高度自适应自身内容，不会被强制拉伸到统一高度
2. 把每个区块内部所有RowDefinition的高度从默认的*改为Height="Auto"，让行高完全贴合内容尺寸，不做多余的空间均分

<Grid Grid.Column="0" Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="250" />
        <ColumnDefinition Width="250" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid Grid.Column="0" Grid.Row="0" Background="Aqua" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" />
        <TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5" />

        <TextBlock Text="Sales" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top" />
        <TextBlock Text="25,887.22" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" />

    </Grid>

    <Grid Grid.Column="1" Grid.Row="0" Background="Aquamarine" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="Non-Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
        <TextBlock Text="Type" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
        <TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>

        <TextBlock Text="Gift Card" Grid.Row="2" Grid.Column="0" />
        <TextBlock Text="Gift Card" Grid.Row="3" Grid.Column="0" />
        <TextBlock Text="Gift Card" Grid.Row="4" Grid.Column="0" />
        <TextBlock Text="Gift Card" Grid.Row="5" Grid.Column="0" />
        <TextBlock Text="Gift Card" Grid.Row="6" Grid.Column="0" />
        <TextBlock Text="Gift Card" Grid.Row="7" Grid.Column="0" />
    </Grid>

    <Grid Grid.Column="2" Grid.Row="0" Background="AliceBlue" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <TextBlock Text="Tender" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center" />
        <TextBlock Text="Description" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
        <TextBlock Text="Begin Amt" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>
        <TextBlock Text="Trx Amt" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Margin="5"/>
        <TextBlock Text="Removed" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right" Margin="5"/>
    </Grid>

</Grid>

布局异常原始效果截图

补充说明：WPF Grid的行高三种取值逻辑：*为按比例分配剩余空间、Auto为自适应内容尺寸、固定数值为硬编码高度；单元格内元素默认对齐方式为Stretch，会自动填满整个单元格的可用区域。

内容的提问来源于stack exchange，提问作者user3856437