Group Box is not rendering correct

• .NET Core Version: .net 6
• Windows version: Windows 11 Version 22H2 Build 22621.674
• Does the bug reproduce also in WPF for .NET Framework 4.8?: I dont know

Problem description:

Group Box is rendering wrong.

Source Code:

<Window x:Class="MyProgram.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Main Window"
        Height="720" Width="1280"
        MinHeight="720" MinWidth="1280"
        WindowStartupLocation="CenterScreen" Icon="icon.ico"
        WindowStyle="ThreeDBorderWindow" ResizeMode="CanResize">
    <Grid>
        <GroupBox BorderThickness="5" BorderBrush="Red" Margin="50"/> // BorderThickness >= 13 looks normal
    </Grid>
</Window>

Expected behavior:

Group Box is rendering correctly

[JackFeyes]

Just so anyone stumbling across this topic can find a resolution, here is the way I deal with this issue: In a WPF resource (global or in <Window.Resources> add the following:

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="FixedGroupBox" TargetType="{x:Type GroupBox}">
            <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}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="4" Grid.Column="0" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1"/>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1" Grid.Column="0">
                                <Border.OpacityMask>
                                    <MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
                                        <Binding ElementName="Header" Path="ActualWidth"/>
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                                    </MultiBinding>
                                </Border.OpacityMask>
                            </Border>
                            <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.RowSpan="2" Grid.Row="0">
                                <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <ContentPresenter Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Then when you use a GroupBox set it style like this:

<GroupBox Style="{StaticResource FixedGroupBox}" x:Name="someName" BorderThickness="2" BorderBrush="#FF5CB32D" Foreground="#FF5CB32D" Header="YOUR HEADER TEXT" >
                <content goes here/>
</GroupBox>

Hope it helps someone

[BlyZeYT]

As for the fix, I don’t see how we can do this without breaking changes. I sort of managed to compromise BorderGapMaskConverter into a more or less compatible way to correctly position the opacity mask, however, positioning the actual header where it should be is not that trivial, since the Grid’s column widths cannot be databound to accommodate for the border thickness. I think the whole GroupBox template would need to be rethought from scratch.

I got the issue fixed thanks for helping 😃