设置GroupBox的样式

Question

我正在尝试创建这样的GroupBox设计.

我看过了 GroupBox.HeaderTemplate

但是我在创建蓝色背景颜色方面遇到了问题,宽度为100%.边境也是如此.

我的代码到目前为止

<GroupBox.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
                    </Grid>
                </DataTemplate>
            </GroupBox.HeaderTemplate>

这就是它现在的样子.

Answer 1

使用默认的GroupBox模板并将其更改为您想要的样子

例如,

  <ControlTemplate TargetType="GroupBox">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Border Grid.Row="0"
              BorderThickness="1"
              BorderBrush="#25A0DA"
              Background="#25A0DA">
          <Label Foreground="White">   
              <ContentPresenter Margin="4"
                          ContentSource="Header"
                          RecognizesAccessKey="True" />
          </Label>
      </Border>

      <Border Grid.Row="1"
              BorderThickness="1,0,1,1"
              BorderBrush="#25A0DA">
        <ContentPresenter Margin="4" />
      </Border>

    </Grid>
  </ControlTemplate>

Answer 2

如果不编写完全不同的模板，您可能无法使其看起来与您的示例完全相同，但我通过将 HeaderTemplate 中的网格宽度绑定到组框的宽度并指定适当的边距和填充来给它一个简单的镜头:

<GroupBox.HeaderTemplate>
    <DataTemplate>
        <Grid Width="{Binding ElementName=groupBox1, Path=ActualWidth}" Margin="-10, 0, -10, 0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Label Content="{Binding}" HorizontalAlignment="Stretch" Background="#25A0DA" Grid.Column="0" Height="20" Padding="5, 0, 0, 0" Margin="10" Foreground="White"/>
        </Grid>
    </DataTemplate>
</GroupBox.HeaderTemplate>

结果如下：

Answer 3

该线程有点旧，但有人可能会发现这很有用......

如果您想要全宽标题，请对雅各布的答案进行小修改。

您可以绑定到父 GroupBox，因此无需命名 GroupBox 即可使用它。

<GroupBox.HeaderTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding}" 
           Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=GroupBox}, Path=ActualWidth }"
           Background="#25A0DA" Grid.Column="0" Height="20" Padding="5,0,0,0" Margin="1" Foreground="White"/>
  </DataTemplate>
</GroupBox.HeaderTemplate>