如何设置Grid最小宽度，使其内部元素按星号规则均等分配尺寸？

当使用星号（如ColumnDefinitions="1*,2*"）指定Grid内元素的尺寸时，空间充足时元素会按设定比例分配（比如1/3和2/3）；但如果父Grid的约束导致空间不足，元素会优先保证不被裁剪，导致比例失效。

示例代码（父Grid列定义为Auto）：

<Grid RowDefinitions="Auto" ColumnDefinitions="Auto">
  <Grid RowDefinitions="1*,1*" ColumnDefinitions="1*,1*" Grid.Column="0">
    <Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="foo"/>
    <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="baaaaaar"/>
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
  </Grid>
</Grid>

此时父Grid的Auto列限制了子Grid的宽度为元素最小尺寸之和，导致按钮宽度不一致（对应“min sizes items”效果）。

需求：让子Grid内元素按星号比例分配空间且不裁剪，实现按钮等宽的效果（对应“buttons have equal size”效果）。

有两种简洁的UI层面实现方案，可根据布局场景选择：

方案1：修改父Grid的列定义 #

如果父Grid不需要固定为Auto宽度，直接将父Grid的ColumnDefinitions从Auto改为*，让父Grid占据全部可用宽度，子Grid的星号列就能正常按比例分配空间，按钮会自动填充列宽：

<Grid RowDefinitions="Auto" ColumnDefinitions="*">
  <Grid RowDefinitions="1*,1*" ColumnDefinitions="1*,1*" Grid.Column="0">
    <Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="foo"/>
    <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="baaaaaar"/>
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
  </Grid>
</Grid>

方案2：用UniformGrid替代子Grid #

如果父Grid必须保持Auto宽度，直接将子Grid替换为UniformGrid，它默认会让所有单元格等宽等高，无需手动设置星号比例，代码更简洁，同时自动保证元素不裁剪且尺寸一致：

<Grid RowDefinitions="Auto" ColumnDefinitions="Auto">
  <UniformGrid Rows="2" Columns="2" Grid.Column="0">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="foo"/>
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="baaaaaar"/>
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
  </UniformGrid>
</Grid>

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