当我更改 GroupBox 样式时，GroupBox header 属性会隐藏吗？

Question

我想更改GroupBox样式，但是当我这样做时，我无法显示GroupBox header 并且Groupbox header 被隐藏。 我想要一个完全像下图一样的 GroupBox：

https://pasteboard.co/JLWHAHL.jpg

具有以下属性：

CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1" Header location=在 GroupBox 边框的顶部

我尝试了以下代码，但没有用：

 <GroupBox x:Name="Search_GroupBox" Header="Search"  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="295,64,0,0" Width="277" Height="70">
    <GroupBox.Style>
        <Style  TargetType="{x:Type GroupBox}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupBox}">
                        <Border CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Canvas.ZIndex="2" BorderBrush="Black" BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" Width="70" Margin="-2,0,-3,-1" Height="20">
                            <TextBlock Text="Search" Foreground="Black" FontWeight="DemiBold" HorizontalAlignment="Center" />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupBox.Style>
 </GroupBox>

Answer 1

您需要在样式中包含ContentPresenter元素，以便同时显示Header内容和GroupBox内容本身。

所以，你的风格应该更像这样：

<GroupBox x:Name="Search_GroupBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="295,64,0,0" Width="277" Height="70">
    <GroupBox.Style>
        <Style  TargetType="{x:Type GroupBox}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupBox}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border x:Name="Header" Padding="3,1,3,0" HorizontalAlignment="Left">
                                <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <Border CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1" Grid.Row="1">
                                <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Canvas.ZIndex="2" BorderBrush="Black" BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" Width="70" Margin="-2,0,-3,-1" Height="20">
                            <TextBlock Text="Search" Foreground="Black" FontWeight="DemiBold" HorizontalAlignment="Center" />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupBox.Style>
</GroupBox>

但是，作为一种更好的方法，建议编辑GroupBox控件的原始样式的副本，同时保留每个ContentPresenter 。

更新

类似于您所附图像中的样式需要在GroupBox控件的默认Template中进行简单编辑。

棘手的是CornerRadius属性，这就是我们要覆盖默认样式并编辑它的原因：

<GroupBox Header="Search" Height="70">
    <GroupBox.Style>
        <Style TargetType="{x:Type GroupBox}">
            <Setter Property="BorderBrush" Value="DarkGray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupBox}">
                        <Grid SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="10"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="10"/>
                            </Grid.RowDefinitions>
                            
                            <Border BorderBrush="Transparent" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    Grid.ColumnSpan="4" Grid.Column="0" 
                                    CornerRadius="11" Grid.Row="1" Grid.RowSpan="3"/>
                            
                            <Border BorderBrush="White" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Grid.ColumnSpan="4" 
                                    CornerRadius="11" Grid.Row="1" Grid.RowSpan="3">
                                <Border.OpacityMask>
                                    <MultiBinding ConverterParameter="10">
                                        <MultiBinding.Converter>
                                            <BorderGapMaskConverter/>
                                        </MultiBinding.Converter>
                                        <Binding ElementName="Header" Path="ActualWidth"/>
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                                    </MultiBinding>
                                </Border.OpacityMask>
                                
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                                    <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="9"/>
                                </Border>
                            </Border>
                            
                            <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
                                <ContentPresenter ContentSource="Header"
                                                  RecognizesAccessKey="True" 
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            
                            <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2" 
                                              Margin="{TemplateBinding Padding}"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupBox.Style>
    
    <!-- Place your content here... -->
    
</GroupBox>