是否可以在边框上方显示GroupBox的标题？

编程问答 2022-06-12

问题描述

是否可以在边框上方而不是边框​​中显示GroupBox的标题？

<GroupBox>
 <GroupBox.Header>
  <TextBlock 
   Text="Test">    
  </TextBlock>
 </GroupBox.Header>
</GroupBox>

解决方法

您必须编辑GroupBox的控制模板并进行调整。您可以使用Visual Studio or Blend提取默认控制模板。它包含一个不透明蒙版，可在组框的边框中为标题文本创建间隙。您必须删除该边框并像这样移动标题：

<Style x:Key="GroupBoxStyle" TargetType="{x:Type GroupBox}">
   <Setter Property="BorderBrush" Value="#D5DFE5"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type GroupBox}">
            <Grid SnapsToDevicePixels="true">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="6"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="6"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="6"/>
               </Grid.RowDefinitions>
               <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" CornerRadius="4" Grid.ColumnSpan="4" Grid.Column="0" Grid.RowSpan="3" Grid.Row="1"/>
               <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="White" CornerRadius="4" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1">
                  <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
                     <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="White" CornerRadius="2"/>
                  </Border>
               </Border>
               <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0">
                  <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
               </Border>
               <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </Grid>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

然后，您可以像这样在XAML中明确使用样式来应用控件模板：

<GroupBox Style="{StaticResource GroupBoxStyle}" Header="Test">
   <!-- ...your content. -->
</GroupBox>

或者将组框样式定义为隐式样式，以将其自动应用于所有GroupBox。

<Style TargetType="{x:Type GroupBox}">
   <!-- ...same as above. -->
</Style>
bordercontroltemplategroupboxwpfwpfxaml