WPF groupbox bez przestrzeni nagłówka

17

Jeśli naprawdę nie chcesz granicę, to nie mogą być te 2 rozwiązania:

(1) Edytuj szablon w mieszance:

Kliknij prawym przyciskiem myszy na GrupęBox> Edytuj szablon> Edytuj kopię> OK

Szukaj sekcji

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

Usuń tę (ww) sekcji .. Właśnie usunięte „luki”
Teraz to będzie działać, jeśli nie ustawić nagłówek (jak ty pokazałem w przykładzie). Jeśli jednak ustawisz nagłówek, przejdzie on za granicę. Tak aby skorygować, wystarczy ustawić Panel.ZIndex="-1" w granicy, który został otaczającą sekcję po prostu usunięte (wygląda <Border BorderBrush="White" BorderThickness= ...)

(2) Wykorzystanie powielać groupbox i obrócić go w poziomie i umieścić go pod oryginalnym groupbox :

Umieść ten kod poniżej groupbox (przyjmując nazwę swojego groupbox jest '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>

załączyć oba te groupbox w Grid tak:

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

Źródło

2010-01-21 17:33:05 mg007

+0

Dzięki! Odpowiedz # 1 jest drogą do zrobienia. Zawarłem szablon w jego stylu, a teraz, jeśli mam GroupBox, który nie potrzebuje nagłówka, stosuję ten styl. – PBelanger

+0

@BBanger można skopiować wkleić kod, jak hermetyzował szablon w swoim stylu? – mohits00691

+0

Wygląda na to, że to nie działa w C# 6 – Brady

8

można naśladować styl polu grupy zmieniając granicę mieć zaokrąglone narożniki i inny kolor. Tutaj jest granica, która wygląda dość blisko granicy 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

Źródło

2010-01-21 15:19:45

+4

Jeden problem widzę z tego rozwiązania jest to, że kontrolą groupbox zmieni styl na podstawie wczytanych stylów dla GroupBox (jak system operacyjny lub inne style zdefiniowane w app.xaml i tak dalej). Ale ustawienie właściwości Border jako takiej nie będzie zgodne ze stylami – PBelanger

0

szukałem podobnego rozwiązania. Potrzebowałem stylu skrzynki grupowej, w której granica była zamknięta tylko wtedy, gdy nie ma tekstu nagłówka.

Nie jestem przekonany, że to najmilsze rozwiązanie, ale działa dobrze ...

Mamy konwerter (działa z tekstem tylko 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 
}

i modyfikacje stylu groupbox:

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

Źródło

2010-09-09 06:17:34 LukeN

5

Opierając się na odpowiedź Mihir Gokani użytkownika, można zmienić domyślny szablon użyć wyzwalacza do zmiany dopełnienia nagłówka na nic, gdy nagłówek jest pusty lub pusty.

Użyj następującego stylu w bloku GroupBox, należy go naprawić.

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

Uwaga jedynym dodatkiem jest:

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

Źródło

2011-01-10 14:17:56 Locdarb

0

cały kod i demo z jego stosowania

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

Źródło

2013-10-15 19:27:57 Chris

WPF groupbox bez przestrzeni nagłówka

Odpowiedz

Powiązane problemy