Styling 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 Template и изменить его, чтобы выглядеть так, как вы хотите

Например,

<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 и указав соответствующие поля и отступы:

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

Answer 4

Попробуйте это:

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

Я понимаю, что это путь поздно, но пакет MahApps.Metro имеет приятный GroupBox, что кажется, как почти так же, как то, что опубликовано в ОП.

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

Вот Xaml от версии 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>