Question

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

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

您还可以了解如何实现下图中显示的双边框效果吗？

enter image description here

放大以获得更好的观点：

enter image description here

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

我得到了什么：

enter image description here

更新

使用下面的代码我到目前为止已经取得了显示的结果：

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

enter image description here

Answer 1

通过调整一些简单的属性，看起来很难实现您想要的效果。您有两种方法可以实现这一目标：

编辑GroupBox的当前（默认）样式。这很简单，但您必须将自定义样式包含在项目中。
为GroupBox创建一个全新的模板。这并不容易，需要更多的工作。

我想使用第一种方法。要获取（以及开始编辑）GroupBox的当前（默认）样式，您可以使用 Blend for Visual Studio ，打开一个新项目，在设计图面上拖动GroupBox，右键单击GroupBox并选择编辑模板 - ＆gt;编辑副本，您可以选择添加新的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效果应具有固定的边框粗细。支持动态边框厚度可能需要更复杂的编辑（此外，我们不知道边框变厚时的外观，也许光影应该是渐变，而不仅仅是实体）。目前更改BorderThickness的{{1}}不起作用，正如您在上面的XAML代码中所看到的，有2个边框将GroupBox设置为BorderBrush。

在WPF中的深色背景上，GroupBox无法正确显示

1 个答案: