Search code examples
wpfxamlstylinggroupbox

Styling a GroupBox


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

enter image description here

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.

enter image description here


Solution

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