WPF GroupBox senza spazio di testa

17

Se davvero non si desidera un bordo, poi ci possono essere queste 2 soluzioni:

(1) Modifica modello in blend:

Fare clic con il tasto destro su GroupBox> Modifica modello> Modifica copia> OK

sezione Ricerca

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

Cancella questo (sopra citato) sezione .. Avete appena rimosso il "gap"
Ora questo funziona se non si imposta l'intestazione (come si ho mostrato nell'esempio). Tuttavia se si imposta l'intestazione, andrà dietro il confine. Quindi, per correggere questo, è sufficiente impostare Panel.ZIndex="-1" nel bordo che è stato che racchiude la sezione appena cancellato (sembra <Border BorderBrush="White" BorderThickness= ...)

(2) Usare duplicare GroupBox e capovolgere orizzontalmente e posizionarlo sotto groupbox originale :

mettere questo codice qui sotto la tua GroupBox (supponendo che il nome del vostro GroupBox è '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>

Racchiudere sia questi GroupBox in un Grid come questo:

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

fonte

2010-01-21 17:33:05 mg007

+0

Grazie! Risposta # 1 è la strada da percorrere .. Ho incapsulato il modello nel suo stile, e ora se ho un GroupBox che non ha bisogno dell'intestazione, applico quello stile. – PBelanger

+0

@PBelanger puoi copiare il codice incollato, come hai incapsulato il modello nel suo stile? – mohits00691

+0

Sembra che questo non funzioni in C# 6 – Brady

8

È possibile emulare lo stile della casella di gruppo modificando il bordo per avere angoli arrotondati e un colore diverso. Ecco un confine che sembra piuttosto vicino al confine 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

fonte

2010-01-21 15:19:45

+4

Un problema che vedo con questa soluzione è che il controllo GroupBox cambierà il suo stile in base agli stili caricati per un GroupBox (come il sistema operativo o altri stili definiti in app.xaml e così via). Ma l'impostazione della proprietà Border come tale non seguirà gli stili – PBelanger

0

ero alla ricerca di una soluzione simile. Avevo bisogno di uno stile di casella di gruppo in cui il bordo fosse chiuso solo quando non c'è il testo dell'intestazione.

Non sono convinto che sia la soluzione più bella, ma funziona bene ...

Abbiamo un convertitore (funziona con solo testo 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 
}

e le modifiche allo stile 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>

fonte

2010-09-09 06:17:34 LukeN

5

Sulla risposta di Mihir Gokani, è possibile modificare il modello predefinito usare un Trigger per modificare il padding dell'intestazione su null, quando l'intestazione è nullo o vuota.

Utilizzare il seguente stile sul GroupBox, dovrebbe risolverlo.

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

Nota l'unica aggiunta è:

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

fonte

2011-01-10 14:17:56 Locdarb

0

tutto il codice e la demo del suo utilizzo

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

fonte

2013-10-15 19:27:57 Chris

WPF GroupBox senza spazio di testa

risposta

Problemi correlati