WPF GroupBox với không gian tiêu đề

Question

dễ dàng một, tôi muốn có một GroupBox với không gian tiêu đề

alt text http://www.freeimagehosting.net/uploads/1d3f80b749.png

Điều gần nhất là một biên giới, nhưng biên giới "theo mặc định" không có cùng Kiểu với hộp nhóm.

Cách dễ nhất (ít nhất là xaml/mã) để nhận được GroupBox mong muốn là gì?

Cảm ơn

Answer 1

Nếu bạn thực sự không muốn có một biên giới, sau đó có thể có những giải pháp 2:

---

(1) Chỉnh sửa mẫu trong hỗn hợp:

• Bấm chuột phải vào GroupBox> Chỉnh sửa mẫu> Chỉnh sửa bản sao> OK

• Tìm kiếm phần

  <Border.OpacityMask> 
       <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7"> 
        ...... 
       </MultiBinding> 
      </Border.OpacityMask> 
  

• Xóa này (nêu trên) phần .. Bạn vừa loại bỏ các "lỗ hổng"

• Bây giờ điều này sẽ có tác dụng nếu bạn không đặt tiêu đề (như bạn đã hiển thị trong ví dụ). Tuy nhiên, nếu bạn đặt tiêu đề, nó sẽ đi sau biên giới. Vì vậy, để khắc phục điều này, chỉ cần đặt Panel.ZIndex="-1" ở biên giới đã được kèm theo phần bạn chỉ cần xóa (có vẻ như <Border BorderBrush="White" BorderThickness= ...)

---

(2) Sử dụng lặp lại GroupBox và lật nó theo chiều ngang và đặt nó bên dưới GroupBox gốc :

• Đặt mã này dưới đây GroupBox bạn (giả sử tên của GroupBox của bạn là 'OriginalGroupbox')

  <GroupBox Header="" Focusable="False" Panel.ZIndex="-1" 
        Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" 
        Height="{Binding ActualHeight, ElementName=OriginalGroupbox}" 
        IsEnabled="{Binding IsEnabled, ElementName=OriginalGroupbox}" 
        RenderTransformOrigin="0.5,0.5"> 
        <GroupBox.RenderTransform> 
         <ScaleTransform ScaleX="-1"/> 
        </GroupBox.RenderTransform> 
  </GroupBox> 
  

• Kèm theo cả hai GroupBox trong một Grid như thế này:

  <Grid> 
      <GroupBox x:Name="OriginalGroupbox" Header="Mihir" ...> 
       ... 
      </GroupBox> 
      <GroupBox Header="" Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" ...> 
       ... 
      </GroupBox> 
  </Grid> 
  

Answer 2

Bạn có thể bắt chước phong cách của nhóm hộp bằng cách thay đổi biên giới của bạn để có góc tròn và màu sắc khác nhau. Đây là một biên giới trông khá gần với biên giới GroupBox:

<Border BorderThickness="1" CornerRadius="4" Height="100" Width="100" Padding="5" BorderBrush="LightGray"><TextBlock>Border</TextBlock></Border> 

alt text http://img264.imageshack.us/img264/6748/borderm.png

Answer 3

tôi đang tìm kiếm một giải pháp tương tự. Tôi cần kiểu hộp nhóm nơi đường viền chỉ được đóng khi không có văn bản tiêu đề.

Tôi không tin đó là giải pháp tốt nhất, nhưng nó hoạt động tốt ...

Chúng tôi có một chuyển đổi (chỉ hoạt động với các văn bản chỉ atm):

public class GroupBoxHeaderVisibilityConverter : IMultiValueConverter 
{ 
    #region IMultiValueConverter Members 

    public object Convert(object[] values, System.Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     ContentPresenter header = values[0] as ContentPresenter; 
     if (header != null) 
     { 
      string text = header.Content as string; 
      if (string.IsNullOrEmpty(text)) 
      { 
       return 0.0; 
      } 
     } 
     return values[1]; 
    } 

    public object[] ConvertBack(object value, System.Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new System.NotImplementedException(); 
    } 

    #endregion 
} 

và những sửa đổi cho GroupBox phong cách:

<Border 
    x:Name="Header" 
    Grid.Column="1" 
    Grid.Row="0" 
    Grid.RowSpan="2" 
    Padding="3,1,3,0"> 
    <Border.Tag> 
     <MultiBinding Converter="{StaticResource GroupBoxHeaderVisibilityConverter}"> 
      <Binding Path="Content" ElementName="groupBoxLabel" /> 
      <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" /> 
     </MultiBinding> 
    </Border.Tag> 
    <Label x:Name="groupBoxLabel" 
     FontSize="{StaticResource Fonts_SmallFontSize}" 
     Foreground="{TemplateBinding Foreground}"> 
     <ContentPresenter 
      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
      ContentSource="Header" 
      RecognizesAccessKey="True" /> 
    </Label> 
</Border> 
<ContentPresenter 
    Margin="{TemplateBinding Padding}" 
    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
    Grid.Column="1" 
    Grid.ColumnSpan="2" 
    Grid.Row="2" /> 
<Border 
    Grid.ColumnSpan="4" 
    Grid.Row="1" 
    Grid.RowSpan="3" 
    BorderBrush="Transparent" 
    BorderThickness="{TemplateBinding BorderThickness}" 
    CornerRadius="4"> 
    <Border.OpacityMask>         
     <MultiBinding 
      Converter="{StaticResource BorderGapMaskConverter}" 
      ConverterParameter="7"> 
      <Binding ElementName="Header" Path="Tag" /> 
      <Binding 
       Path="ActualWidth" 
       RelativeSource="{RelativeSource Self}" /> 
      <Binding 
       Path="ActualHeight" 
       RelativeSource="{RelativeSource Self}" /> 
     </MultiBinding> 
    </Border.OpacityMask> 
    <Border 
     BorderBrush="{TemplateBinding BorderBrush}" 
     BorderThickness="{TemplateBinding BorderThickness}" 
     CornerRadius="3" /> 
</Border> 

Answer 4

Xây dựng về câu trả lời Mihir Gokani, bạn có thể thay đổi mẫu mặc định để sử dụng Trình kích hoạt để thay đổi phần đầu của phần đệm thành không có gì, khi tiêu đề rỗng hoặc trống.

Sử dụng kiểu sau trên GroupBox, nên khắc phục.

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/> 
<Style x:Key="GroupBoxStyle" TargetType="{x:Type GroupBox}"> 
    <Setter Property="BorderBrush" Value="#D5DFE5"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type GroupBox}"> 
       <Grid SnapsToDevicePixels="true"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="6"/> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="6"/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
         <RowDefinition Height="6"/> 
        </Grid.RowDefinitions> 
        <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/> 
        <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2"> 
         <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
        </Border> 
        <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"> 
         <Border.OpacityMask> 
          <MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}"> 
           <Binding ElementName="Header" Path="ActualWidth"/> 
           <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/> 
           <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/> 
          </MultiBinding> 
         </Border.OpacityMask> 
         <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> 
          <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/> 
         </Border> 
        </Border> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Header" Value="{x:Null}"> 
         <Setter TargetName="Header" Property="Padding" Value="0" />         
        </Trigger> 
         <Trigger Property="Header" Value=""> 
          <Setter TargetName="Header" Property="Padding" Value="0" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Lưu ý việc bổ sung duy nhất là:

<ControlTemplate.Triggers> 
    <Trigger Property="Header" Value="{x:Null}"> 
     <Setter TargetName="Header" Property="Padding" Value="0" />         
    </Trigger> 
    <Trigger Property="Header" Value=""> 
     <Setter TargetName="Header" Property="Padding" Value="0" /> 
    </Trigger> 
</ControlTemplate.Triggers> 

Answer 5

toàn bộ mã và demo của việc sử dụng nó

<UserControl.Resources> 
    <ResourceDictionary> 
     <BorderGapMaskConverter x:Key="BorderGapMaskConverter"/> 
    <Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}"> 
     <Setter Property="BorderBrush" Value="#D5DFE5"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type GroupBox}"> 
        <Grid SnapsToDevicePixels="true"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="6"/> 
          <ColumnDefinition Width="Auto"/> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="6"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="6"/> 
         </Grid.RowDefinitions> 
         <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/> 
         <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"> 

          <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> 
           <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/> 
          </Border> 
         </Border> 
         <Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2"> 
          <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </Border> 
         <ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
     </ResourceDictionary> 
</UserControl.Resources> 

<Grid> 

    <GroupBox Header="" HorizontalAlignment="Left" Margin="70,39,0,0" VerticalAlignment="Top" Height="169.96" Width="299.697" Style="{DynamicResource GroupBoxStyle1}"/> 
</Grid>