如何让Grid内带MaxHeight的元素小于阈值时占满空间，超出时固定底部

解决方案 #

你可以通过绑定Border的高度到父容器实际高度，配合MaxHeight和VerticalAlignment属性实现全部要求，修改后的代码如下：

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   <!-- ... -->
   <Grid x:Name="BadgeContainer" Grid.Column="2">
      <Border Width="60"
              Height="{Binding ActualHeight, ElementName=BadgeContainer}"
              MaxHeight="33"
              VerticalAlignment="Bottom"
              CornerRadius="0 0 3 0"
              Background="#FFD20B0B">
           <TextBlock FontSize="13"
                      FontWeight="Bold"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"
                      FontFamily="Arial"
                      Foreground="#FFFFFFFF">
                  <Span>Broken</Span>
            </TextBlock>
       </Border>
   </Grid>
</Grid>

实现逻辑 #

• 给承载徽章的Grid命名为BadgeContainer，将Border的高度绑定到该容器的实际高度，保证父容器高度小于33px时，Border可以完全填满容器
• 保留MaxHeight="33"限制徽章的最大高度
• 新增VerticalAlignment="Bottom"，当父容器高度大于33px时，高度被MaxHeight限制为33px的Border会自动停靠在容器底部，不会居中

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