如果MaxHeight小于MaxHeight，則使具有MaxHeight的元素占據Grid中的整個空間，否則固定到底部

我想完成以下任務：

• 在Grid元素的右側有一個徽章。
• 徽章的最大高度應為 33 像素。
• 如果Grid高度本身小于 33px，則徽章應占用整個可用空間并與Grid.
• 如果Grid高度本身超過 33 像素，則徽章應固定在底部且高度為 33 像素。

這是我目前擁有的代碼：

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   <!-- ... -->
   <Grid Grid.Column="2">
      <Border Width="60"
              MaxHeight="33"
              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尺寸大于 33 像素，徽章就會固定在中心。在這種情況下，如何將其固定到底部？

PS 如果我使用VerticalAlignment="Bottom"，我將失去第三個要求 -Grid當Grid的大小小于 33px（例如Gridsize = 20px）時，徽章不會變成的高度。

uj5u.com熱心網友回復：

不幸的是，WPF 沒有內置的 XAML 語法來進行大于. 您可以做的是為此創建一個自定義值轉換器，例如，true如果值大于給定引數，false則回傳，否則回傳。

public class IsGreaterThanConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      if (!(value is double doubleValue) ||
          !(parameter is string parameterText) ||
          !double.TryParse(parameterText, out var doubleParameter))
         return Binding.DoNothing;

      return doubleValue > doubleParameter;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
      return new InvalidOperationException();
   }
}

我們的想法是結合ActualHeight父Grid在DataTrigger該檢查它是否大于閾值（這里更大33）使用上面的轉換器。根據是，它設定VerticalAlignment及Height的Border。的默認值VerticalAlignment是Stretch，如果實際高度小于或等于被設定33（轉換器回傳false）。

<Grid>
   <Grid.Resources>
      <local:IsGreaterThanConverter x:Key="IsGreaterThanConverter"/>
   </Grid.Resources>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   <!-- ... -->
   <Grid Grid.Column="2">
      <Border Width="60"
              MaxHeight="33"
              CornerRadius="0 0 3 0"
              Background="#FFD20B0B">
         <Border.Style>
            <Style TargetType="{x:Type Border}">
               <Setter Property="VerticalAlignment" Value="Stretch"/>
               <Style.Triggers>
                  <DataTrigger Binding="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Converter={StaticResource IsGreaterThanConverter}, ConverterParameter=33}" Value="True">
                     <Setter Property="Height" Value="33"/>
                     <Setter Property="VerticalAlignment" Value="Bottom"/>
                  </DataTrigger>
               </Style.Triggers>
            </Style> 
         </Border.Style>
         <TextBlock FontSize="13"
                    FontWeight="Bold"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    FontFamily="Arial"
                    Foreground="#FFFFFFFF">
            <Span>Broken</Span>
         </TextBlock>
      </Border>
   </Grid>
</Grid>

不要忘記轉換器需要在范圍內的資源字典中實體化，這里在Grid.Resources. 當然，如果需要，您也可以將樣式提取到資源字典中。

uj5u.com熱心網友回復：

您可以將邊框的高度系結到網格的實際高度。結合您的 MaxHeight 和 VerticalAlignment 將為您提供所需的內容。

<Grid x:Name="RootGrid" Grid.Column="2">
    <Border Width="60"
            MaxHeight="33"
            CornerRadius="0 0 3 0"
            Background="#FFD20B0B"
            VerticalAlignment="Bottom"
            Height="{Binding ActualHeight, ElementName=RootGrid}">
        <!-- ... -->
    </Border>
</Grid>

標籤：小白 xml

上一篇：如何根據xaml中的視窗大小動態更改文本和影像的位置

下一篇：如何將命令系結到動態添加的按鈕？