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

Try this :

  <GroupBox BorderThickness="0"  Header="BELT WEIGHER BC#1 JETTY" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="193" Width="374" OpacityMask="Black" BorderBrush="#FF1864D3" FontSize="16" FontWeight="Bold">
        <GroupBox.HeaderTemplate >
            <DataTemplate>
                <TextBlock Text="{Binding}"  
                 Width="357" Grid.Column="0" Padding="5,3,0,0" Margin="0,0,0,0"  Foreground="White" Height="33">
                    <TextBlock.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="White" Offset="0.968"/>
                            <GradientStop Color="Blue" Offset="0.828"/>
                        </LinearGradientBrush>
                    </TextBlock.Background>
                </TextBlock>
            </DataTemplate>
        </GroupBox.HeaderTemplate>
        <Border x:Name="CanvasBorder" BorderBrush="Blue"  BorderThickness="1" Margin="3,0,3,0">
            <Canvas  Background="white" Margin="0,0,0,0" >
                <Label Content="Feed Rate" Canvas.Left="10" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 1" Canvas.Left="10" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="Totalizer 2" Canvas.Left="10" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Load" Canvas.Left="10" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="Belt Speed" Canvas.Left="10" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <TextBlock x:Name="BC1_Feedrate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="13" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="38" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_Totalizer2" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="63" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltLoad" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="88" Padding="0,0,4,0"/>
                <TextBlock x:Name="BC1_BeltSpeed" HorizontalAlignment="Left" TextWrapping="Wrap" Text="0.00" VerticalAlignment="Top" Background="#FFF2F2FB" Width="119" FontWeight="Bold" Height="20" TextAlignment="Right" Canvas.Left="91" Canvas.Top="113" Padding="0,0,4,0"/>
                <Label Content="ton/hour" Canvas.Left="228" Canvas.Top="10" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="35" FontWeight="Normal" FontSize="12"/>
                <Label Content="ton" Canvas.Left="228" Canvas.Top="60" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="kg/meter" Canvas.Left="228" Canvas.Top="85" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
                <Label Content="meter/second" Canvas.Left="228" Canvas.Top="110" FontWeight="Normal" FontSize="12" RenderTransformOrigin="0.516,1.808"/>
            </Canvas>
        </Border>
    </GroupBox>

Answer 2

I realize this is way late, but the MahApps.Metro package has a nice GroupBox that seems to like nearly exactly like what is posted in the OP.

https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Styles/Controls.GroupBox.xaml

Here's the Xaml from version 1.22

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:Controls="clr-namespace:MahApps.Metro.Controls"
                xmlns:Converters="clr-namespace:MahApps.Metro.Converters">

<Converters:ThicknessBindingConverter x:Key="ThicknessBindingConverter" />

<Style x:Key="MetroGroupBox" TargetType="{x:Type GroupBox}">
    <Setter Property="Foreground" Value="{DynamicResource BlackBrush}" />
    <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Controls:ControlsHelper.ContentCharacterCasing" Value="Upper" />
    <Setter Property="Controls:ControlsHelper.HeaderFontSize" Value="{DynamicResource ContentFontSize}" />
    <Setter Property="Controls:GroupBoxHelper.HeaderForeground" Value="{x:Null}" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid x:Name="GroupBoxRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Border x:Name="HeaderSite"
                            Grid.Row="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            UseLayoutRounding="True">
                        <Controls:ContentControlEx x:Name="HeaderContent"
                                                   Padding="{TemplateBinding Padding}"
                                                   FontSize="{TemplateBinding Controls:ControlsHelper.HeaderFontSize}"
                                                   FontWeight="{TemplateBinding Controls:ControlsHelper.HeaderFontWeight}"
                                                   FontStretch="{TemplateBinding Controls:ControlsHelper.HeaderFontStretch}"
                                                   Content="{TemplateBinding Header}"
                                                   ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.ContentCharacterCasing)}"
                                                   ContentStringFormat="{TemplateBinding HeaderStringFormat}"
                                                   ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                   ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                                   RecognizesAccessKey="True"
                                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                   UseLayoutRounding="False">
                            <TextElement.Foreground>
                                <MultiBinding Converter="{x:Static Converters:BackgroundToForegroundConverter.Instance}">
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="Background"
                                             Mode="OneWay" />
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="(Controls:GroupBoxHelper.HeaderForeground)"
                                             Mode="OneWay" />
                                </MultiBinding>
                            </TextElement.Foreground>
                        </Controls:ContentControlEx>
                    </Border>
                    <Border Grid.Row="1"
                            Background="Transparent"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:IgnoreThicknessSideType.Top}}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            UseLayoutRounding="True">
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Cursor="{TemplateBinding Cursor}"
                                          UseLayoutRounding="False" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 3

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 4

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>

Answer 5

You probably will not be able to make it look exactly like your example without writing a completely different template but I gave it a simple shot by binding the width of the grid in your HeaderTemplate to the width of the groupbox and by specifying appropriate margin and padding:

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

The result looks like this: