Styling a GroupBox

Question

I'm trying to create a GroupBox design like this.

I have looked at the GroupBox.HeaderTemplate

but I'm having problems creating the blue background color, with a width of 100%. The same goes for the border.

My code so far

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

And this is what it looks like right now.

Answer 1

This thread is a bit old, but someone could find this useful...

A small modification to Jakob's answer if you want to have full width header.

You can bind to the parent GroupBox, so you can use it without having a named 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>

Answer 2

Take the default GroupBox Template and alter it to look the way you want

For example,

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