c# - GroupBox 在 WPF 的深色背景上显示不正确

Question

我正在尝试在深色背景上绘制类似于下图的 GroupBox。

我注意到的第一件事是，我还为边框选择了一种相当深的颜色 #383838，它仍然显示为白色!我该如何解决这个问题？

请问下图双边框效果如何实现？

缩放以获得更好的 View :

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources></Window.Resources>
    <Grid Background="#535353">
        <GroupBox Header="Create New 3D Object" 
                  Foreground="White" 
                  BorderBrush="#383838" 
                  BorderThickness="1" 
                  Width="200" 
                  Height="200"
                  SnapsToDevicePixels="True"/>
    </Grid>
</Window>

我得到的:

---

更新

到目前为止，我使用下面的代码实现了显示的结果:

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
        <Style TargetType="{x:Type GroupBox}">
            <Setter Property="BorderBrush" Value="#383838" />
            <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 CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" Background="{TemplateBinding Background}" />
                            <Border Name="Header" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                                <ContentPresenter ContentSource="Header" RecognizesAccessKey="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Border>
                            <ContentPresenter Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            <Border Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4"  BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
                                <Border.OpacityMask>
                                    <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                                        <Binding ElementName="Header" Path="ActualWidth" />
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" />
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}" />
                                    </MultiBinding>
                                </Border.OpacityMask>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid Background="#535353">
        <GroupBox Header="Create New 3D Object" 
                  Foreground="White" 
                  BorderBrush="#383838" 
                  BorderThickness="1" 
                  Width="200" 
                  Height="200"
                  SnapsToDevicePixels="True"/>
    </Grid>
</Window>

Answer 1

看起来通过调整一些简单的属性来实现你想要的并不容易。您有 2 种方法可以实现此目的:

1. 编辑 GroupBox 的当前(默认)样式。这很简单，但您必须将自定义样式包含到您的项目中。

2. 为 GroupBox 创建一个全新的模板。这并不容易，需要更多的工作。

我想使用第一种方法。要获取(以及开始编辑)GroupBox 的当前(默认)样式，您可以使用 Blend for Visual Studio，打开一个新建项目，在设计界面拖一个GroupBox，右键点击GroupBox，选择Edit Template -> Edit a Copy，可以选择添加一个新的 ResourceDictionary。编辑 XAML 代码后，您可以复制整个代码并粘贴到项目中的 ResourceDictionary 文件中。我们可以将此文件命名为 CustomStyles.xaml。我们可以像这样将这个资源文件合并到 Window.Resource 中:

<Window.Resource>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
          <ResourceDictionary Source="CustomStyles.xaml"/>            
      </ResourceDictionary.MergedDictionaries>
      <!-- other resources -->
   </ResourceDictionary>
</Window.Resource>

我已经编辑了默认样式，结果如下(CustomStyles.xaml 的内容):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
  <Style 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 BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>
                    <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
                        <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 BorderBrush="#ff262626" BorderThickness="1,1,1,1" CornerRadius="0">
                            <Border BorderBrush="#44ffffff" BorderThickness="0,0,0,1" CornerRadius="0" Margin="0,0,0,-2">
                                <Border BorderBrush="#44ffffff" BorderThickness="1,1,0,0" CornerRadius="0" Margin="0,0,0,1" />
                            </Border>
                        </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" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

我们只是编辑了上面Border 元素的一些属性。请注意，这种 3D 效果应该具有固定的边框厚度。支持动态边框粗细可能需要更复杂的编辑(而且我们不知道边框变粗时的样子，也许光影应该是渐变的，而不仅仅是纯色的)。当前更改 GroupBox 的 BorderThickness 无效，正如您在上面的 XAML 代码中看到的那样，有 2 个边框的 BorderBrush 设置为透明。