When I change GroupBox style, GroupBox header property becomes hidden?

Question

I want to change GroupBox style but when I do this I can't show GroupBox header and Groupbox header becomes hidden. I want a GroupBox exactly like following image:

https://pasteboard.co/JLWHAHL.jpg

With the following properties:

CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1" Header location=at top on the GroupBox border

I tried the following code but it didn't work:

 <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

You need to include ContentPresenter element in the style in order to show both the Header content and the GroupBox content itself.

So, your style should be more like this:

<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>

However, as a better approach, it's recommended to edit a copy of the original style of the GroupBox control leaving ContentPresenters each in place.

Update

A style similar to the one in the image you attached would require a simple edit in the default Template of the GroupBox control.

The tricky thing about it is the CornerRadius property, that's why we are going to override the default style and edit it:

<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>