WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则

只要你用 XAML 写代码，我敢打赌你一定用各种方式使(nuè)用(dài)过 Grid。不知你有没有在此过程中看到过 Grid 那些匪夷所思的布局结果呢？

本文将带你来看看 Grid 布局中的 Bug。

---

无限空间下的比例

先上一段代码，直接复制到你的试验项目中运行：

<Canvas>
    <Grid Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" Background="CornflowerBlue" Width="150" />
        <Border Grid.Column="1" Background="Tomato" Width="150" />
        <Border Grid.Column="2" Background="Teal" Width="150" />
    </Grid>
</Canvas>

第一列固定 100，第二列占 1 个比例的 *，第三列占 2 个比例的 *。你觉得最终的效果中，第二个 Border 和第三个 Border 的可见尺寸分别是多少呢？

按

下

F5

运

行

看

看

结

果

预料到了吗？虽然第二列和第三列的比例是 1:2，但最终的可见比例却是 1:1。

这里是有破绽的，因为你可能会怀疑第三列其实已经是第二列的两倍，只是右侧是空白，看不出来。那么现在，我们去掉 Canvas，改用在父 Grid 中右对齐，也就是如下代码：

<Grid HorizontalAlignment="Right">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition