WPF GroupBox Header 自定义居中显示

WPF GroupBox Header 居中

样式设置

 <Style x:Key="CenterHeaderGroupBoxStyle" TargetType="{x:Type GroupBox}">
        <Setter Property="BorderBrush" Value="#FFAEAEAE"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupBox}">
                    <Grid SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="4"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="4"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="4"/>
                        </Grid.RowDefinitions>
                        <!--外边框-->
                        <Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="5"
                                        CornerRadius="4" BorderBrush="Transparent"
                                        BorderThickness="{TemplateBinding BorderThickness}"                                        
                                        Background="{TemplateBinding Background}"/>
                        <!--Header-->
                        <Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"
                                        x:Name="Header" Padding="3,1,3,0">
                            <ContentPresenter ContentSource="Header" RecognizesAccessKey="True"
                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <!--内容-->
                        <ContentPresenter Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3"                                                  
                                                  Margin="{TemplateBinding Padding}"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <!--外边框样式，设置不透明蒙板,隐藏串过header的border边线-->
                        <Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="5"
                                    CornerRadius="4" BorderBrush="White"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                            <Border.OpacityMask>
                                <MultiBinding Converter="{StaticResource CenterBorderGapMaskConverter}">
                                    <Binding ElementName="Header" Path="ActualWidth"/>
                                    <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth"/>
                                    <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight"/>
                                </MultiBinding>
                            </Border.OpacityMask>
                            <Border BorderThickness="{TemplateBinding BorderThickness}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            CornerRadius="3">
                                <Border BorderThickness="{TemplateBinding BorderThickness}"
                                                BorderBrush="White" 
                                                CornerRadius="2"/>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Headrt部分背景显示设置：Opacity是设置透明的，OpacityMask是个透明遮罩，就相当于在背景上再加了一层。用来改变背景的透明度。groupbox默认实现类为BorderGapMaskConverter，此处要居中，重定义器边框透明样式。

CenterBorderGapMaskConverter实现

//BorderGapMaskConverter
    internal class CenterBorderGapMaskConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            Type type = typeof(double);
            if (values == null
                || values.Length != 3
                || values[0] == null
                || values[1] == null
                || values[2] == null
                || !type.IsAssignableFrom(values[0].GetType())
                || !type.IsAssignableFrom(values[1].GetType())
                || !type.IsAssignableFrom(values[2].GetType()))
            {
                return DependencyProperty.UnsetValue;
            }

            double pixels = (double)values[0];
            double width = (double)values[1];
            double height = (double)values[2];
            if ((width == 0.0) || (height == 0.0))
            {
                return null;
            }
            Grid visual = new Grid();
            visual.Width = width;
            visual.Height = height;
            ColumnDefinition colDefinition1 = new ColumnDefinition();
            ColumnDefinition colDefinition2 = new ColumnDefinition();
            ColumnDefinition colDefinition3 = new ColumnDefinition();
            colDefinition1.Width = new GridLength(1.0, GridUnitType.Star);
            colDefinition2.Width = new GridLength(pixels);
            colDefinition3.Width = new GridLength(1.0, GridUnitType.Star);
            visual.ColumnDefinitions.Add(colDefinition1);
            visual.ColumnDefinitions.Add(colDefinition2);
            visual.ColumnDefinitions.Add(colDefinition3);
            RowDefinition rowDefinition1 = new RowDefinition();
            RowDefinition rowDefinition2 = new RowDefinition();
            rowDefinition1.Height = new GridLength(height / 2.0);
            rowDefinition2.Height = new GridLength(1.0, GridUnitType.Star);
            visual.RowDefinitions.Add(rowDefinition1);
            visual.RowDefinitions.Add(rowDefinition2);
            Rectangle rectangle1 = new Rectangle();
            Rectangle rectangle2 = new Rectangle();
            Rectangle rectangle3 = new Rectangle();
            rectangle1.Fill = Brushes.Black;
            rectangle2.Fill = Brushes.Black;
            rectangle3.Fill = Brushes.Black;
            Grid.SetRowSpan(rectangle1, 2);
            Grid.SetRow(rectangle1, 0);
            Grid.SetColumn(rectangle1, 0);
            Grid.SetRow(rectangle2, 1);
            Grid.SetColumn(rectangle2, 1);
            Grid.SetRowSpan(rectangle3, 2);
            Grid.SetRow(rectangle3, 0);
            Grid.SetColumn(rectangle3, 2);
            visual.Children.Add(rectangle1);
            visual.Children.Add(rectangle2);
            visual.Children.Add(rectangle3);
            return new VisualBrush(visual);
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return new object[] { Binding.DoNothing };
        }
    }

使用：

 <GroupBox Header="表头居中" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Margin="2"
                         Style="{StaticResource CenterHeaderGroupBoxStyle}">
                </GroupBox>

效果图：

 

参考
WPF GroupBox Header Customization - Stack Overflow

How to: Define a GroupBox Template - WPF .NET Framework | Microsoft Docs