Diseñar un GroupBox

Question

Estoy intentando crear un diseño de GroupBox como este.

He mirado el GroupBox.HeaderTemplate

pero estoy teniendo problemas para crear el color de fondo azul, con una anchura de 100%. Lo mismo aplica para el borde.

Mi código hasta ahora

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

Y esto es lo que parece en este momento.

Answer 1

Tome el valor por defecto GroupBox Template y alterarlo para buscar la manera deseada

Por ejemplo,

<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

Probablemente no va a ser capaz de hacer que se vea exactamente como su ejemplo sin necesidad de escribir una plantilla completamente diferente pero le dio un simple disparo uniendo la anchura de la rejilla en su HeaderTemplate a la anchura de el cuadro de grupo y mediante la especificación de margen y el relleno apropiado:

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

el resultado es el siguiente:

Answer 3

Este hilo es un poco viejo, pero alguien podría resultar útil ...

Una pequeña modificación a la respuesta de Jakob si quieres tener un encabezado de ancho completo.

Puede enlazar al GroupBox padre, para que pueda usarlo sin tener un GroupBox con nombre.

<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

Prueba esto:

<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

que darse cuenta de esto es la forma de retraso, pero el paquete MahApps.Metro tiene una bonita GroupBox que parece que le gusta casi exactamente igual que lo que se ha escrito en el OP.

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

Aquí está la versión de 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>