Question

所以这是我的GroupBox：

<GroupBox 
    Header="My header"
    Background="Transparent"
    Foreground="Gainsboro"
    BorderBrush="Gainsboro" />

我有几件事我想改变/问题：

Foreground仍然是黑色的，虽然我已经改变了它。
boder周围的Header：我想删除它以实现这种风格（header超过border）：

所有标题均为大写。

编辑：

添加用户@ mm8建议的style后，结果如下：

为什么我可以看到重复的边框？

Answer 1

您可以覆盖GroupBox的模板：

<GroupBox Header="My header" Style="{x:Null}">
    <GroupBox.Template>
        <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="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
                    <Border.OpacityMask>
                        <MultiBinding ConverterParameter="7">
                            <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="3">
                        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                    </Border>
                </Border>
                <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Background="LightGreen" BorderBrush="Black" CornerRadius="2" BorderThickness="1">
                    <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>
    </GroupBox.Template>
    <TextBlock>content...</TextBlock>
</GroupBox>

Answer 2

创建自己的一组控件以完全控制，类似于：

<Grid Width="100" Height="200" Background="DodgerBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border BorderThickness="1" BorderBrush="Gainsboro">
        <TextBlock Foreground="Gainsboro">Header</TextBlock>
    </Border>

    <Border Grid.Row="1" BorderThickness="1" BorderBrush="Gainsboro">
        <!--Content-->
    </Border>
</Grid>

如何更改我的组框样式

2 个答案: