1. Accueil
  2. Question et réponse
  3. WPF GroupBox sans espace d'en-tête

WPF GroupBox sans espace d'en-tête

2010-01-21 5 views

Répondre

17

Si vous ne voulez vraiment pas une frontière, alors il peut y avoir ces 2 solutions:

(1) Editer le modèle en fusion:

  • Cliquez avec le bouton droit de la souris sur GroupBox> Modifier le modèle> Modifier la copie> OK

  • section Rechercher

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

  • Supprimer cette section (mentionnée ci-dessus) .. Vous venez de retirer le « gap »

  • Maintenant, cela fonctionnera si vous ne définissez pas l'en-tête (comme vous ont montré dans l'exemple). Cependant, si vous définissez l'en-tête, il ira derrière la frontière. Donc, pour corriger cela, vient de mettre Panel.ZIndex="-1" à la frontière qui joignait la section que vous venez de supprimer (il ressemble à <Border BorderBrush="White" BorderThickness= ...)

(2) Utiliser en double GroupBox et retourner horizontalement et placez-le sous groupbox d'origine :

  • Mettez ce code ci-dessous votre groupbox (en supposant que votre nom de groupbox est '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>

  • Enfermez ces deux GroupBox dans un Grid comme ceci:

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

Source

2010-01-21 17:33:05 mg007

+0

Merci! Répondre # 1 est la voie à suivre .. J'ai encapsulé le modèle dans son style, et maintenant si j'ai un GroupBox qui n'a pas besoin de l'en-tête, j'applique ce style. – PBelanger

+0

@PBelanger pouvez-vous s'il vous plaît copier coller le code, comment vous encapsulé le modèle dans son style? – mohits00691

+0

Il semble que cela ne fonctionne pas dans C# 6 – Brady

8

Vous pouvez imiter le style de la boîte de groupe en changeant votre frontière pour avoir des coins arrondis et une couleur différente. Voici une frontière qui semble assez proche de la frontière 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

Source

2010-01-21 15:19:45

+4

Un problème que je vois avec cette solution est que le contrôle GroupBox changera son style en fonction des styles chargés pour un GroupBox (comme le système d'exploitation ou d'autres styles définis dans app.xaml et ainsi de suite). Mais définir la propriété de la frontière en tant que tel ne suivra pas les styles – PBelanger

0

Je cherchais une solution similaire. J'avais besoin d'un style de boîte de groupe où la bordure était fermée seulement quand il n'y avait pas de texte d'en-tête.

Je ne suis pas convaincu que c'est la meilleure solution, mais ça marche bien ...

Nous avons un convertisseur (fonctionne avec du texte uniquement 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 
}

et les modifications au style 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>

Source

2010-09-09 06:17:34 LukeN

5

Miser sur la réponse de Mihir Gokani, vous pouvez modifier le modèle par défaut utiliser un déclencheur pour modifier le remplissage de l'en-tête à rien, lorsque l'en-tête est vide ou vide.

Utilisez le style suivant sur le GroupBox, devrait le réparer.

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

Notez le seul ajout est:

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

Source

2011-01-10 14:17:56 Locdarb

0

l'ensemble du code et démonstration de son utilisation

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

Source

2013-10-15 19:27:57 Chris

Questions connexes

 Questions connexes