Tạo kiểu cho GroupBox

Question

Tôi đang cố tạo một thiết kế GroupBox như thế này.

Tôi đã nhìn vào GroupBox.HeaderTemplate

nhưng tôi đang gặp vấn đề tạo màu nền xanh, có chiều rộng 100%. Cũng vậy với biên giới.

Mã của tôi cho đến nay

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

Và đây là những gì nó trông giống như ngay bây giờ.

Answer 1

Hãy mặc định GroupBox Template và thay đổi nó để tìm theo cách bạn muốn

Ví dụ,

<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

Bạn có thể sẽ không thể làm cho nó trông giống hệt như ví dụ của bạn mà không cần viết một mẫu hoàn toàn khác nhau nhưng tôi đã cho nó một shot đơn giản bằng cách gắn chiều rộng của lưới điện trong HeaderTemplate của bạn với độ rộng của các GroupBox và bằng cách xác định margin và padding thích hợp:

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

kết quả trông như thế này:

Answer 3

chủ đề này là một chút cũ, nhưng ai đó có thể thấy hữu ích ...

này Một sửa đổi nhỏ cho câu trả lời của Jakob nếu bạn muốn có tiêu đề chiều rộng đầy đủ.

Bạn có thể liên kết với GroupBox chính, để bạn có thể sử dụng nó mà không cần có GroupBox được đặt tên.

<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

Hãy thử điều này:

<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

Tôi nhận ra đây là cách muộn, nhưng gói MahApps.Metro có một GroupBox đẹp mà dường như thích gần giống hệt như những gì được đăng tải trong OP.

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

Đây là XAML từ phiên bản 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>