Styling a GroupBox

Question

Sto provando a creare un design GroupBox come questo.

ho guardato il GroupBox.HeaderTemplate

ma sto avendo problemi di creare il colore di sfondo blu, con una larghezza di 100%. Lo stesso vale per il confine.

Il mio codice finora

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

E questo è quello che sembra in questo momento.

Answer 1

Prendere il default GroupBox Template e modificarlo a guardare il modo in cui si desidera

Per esempio,

<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

Probabilmente non sarà in grado di far sembrare esattamente come il vostro esempio senza scrivere un modello completamente diverso, ma ho dato un colpo semplice legando la larghezza della griglia nel vostro HeaderTemplate alla larghezza di GroupBox e specificando margini e padding appropriata:

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

il risultato è simile al seguente:

Answer 3

Questo thread è un po 'vecchio, ma qualcuno potrebbe trovare questo utile ...

Una piccola modifica alla risposta di Jakob se si desidera avere un'intestazione a larghezza intera.

È possibile eseguire il binding al GroupBox padre, quindi è possibile utilizzarlo senza un GroupBox denominato.

<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

Prova questo:

<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

Mi rendo conto che questo è il modo in ritardo, ma il pacchetto MahApps.Metro ha una bella GroupBox che sembra piacere quasi esattamente come quello che è pubblicato nel PO.

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

Ecco il Xaml dalla versione 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>