WPF GroupBox без пространства заголовка

19

Легкий, я хотел бы иметь GroupBox без пространства заголовка

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

Ближайшая вещь - это граница, но граница «по умолчанию» не имеет того же стиля, что и поле группы.

Какой самый простой способ (наименьший xaml / code) получить желаемый GroupBox?

Спасибо

    
задан PBelanger 21.01.2010 в 16:01
источник

5 ответов

17

Если вы действительно не хотите границы, тогда могут быть эти 2 решения:

(1) Редактировать шаблон в blend:

  • Щелкните правой кнопкой мыши на GroupBox & gt; Изменить шаблон & gt; Изменить копию & gt; OK
  • Искать раздел

      <Border.OpacityMask>
           <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                ......
           </MultiBinding>
      </Border.OpacityMask>
    
  • Удалить этот раздел (выше). Вы только что удалили «пробел»

  • Теперь это будет работать, если вы не установите заголовок (как вы показали в примере). Однако, если вы установите заголовок, он пойдет за границу. Поэтому, чтобы исправить это, просто установите Panel.ZIndex="-1" на границе, которая включает раздел, который вы только что удалили (он выглядит как <Border BorderBrush="White" BorderThickness= ... )

(2) Используйте дубликат 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>
    
  • Включите оба этих GroupBox в Grid следующим образом:

    <Grid>
         <GroupBox x:Name="OriginalGroupbox" Header="Mihir" ...>
            ...
         </GroupBox>
         <GroupBox Header="" Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" ...>
            ...
         </GroupBox>
    </Grid>
    
ответ дан mg007 21.01.2010 в 18:33
  • Спасибо! Ответ # 1 - это путь. Я инкапсулировал шаблон в его стиле, и теперь, если у меня есть GroupBox, которому не нужен заголовок, я применяю этот стиль. –  PBelanger 23.01.2010 в 14:47
  • @PBelanger, можете ли вы скопировать код вставить, как вы инкапсулировали шаблон в свой стиль? –  mohits00691 16.09.2013 в 13:53
  • Кажется, что это не работает в C # 6 –  Brady 31.07.2015 в 18:47
10

Вы можете эмулировать стиль группового поля, изменив границу, чтобы иметь закругленные углы и другой цвет. Вот граница, которая выглядит довольно близко к границе 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     

ответ дан Ben Collier 21.01.2010 в 16:19
  • Одна из проблем, которые я вижу в этом решении, заключается в том, что элемент управления GroupBox изменит свой стиль на основе загруженных стилей для GroupBox (например, ОС или других стилей, определенных в app.xaml и т. д.). Но настройка свойства Border как такового не будет следовать стилям –  PBelanger 21.01.2010 в 16:55
5

Основываясь на ответе Михира Гокани, вы можете изменить шаблон по умолчанию, чтобы использовать триггер для изменения отступов заголовка до нуля, когда заголовок пуст или пуст.

Используйте следующий стиль в GroupBox, его следует исправить.

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

Обратите внимание, что единственное дополнение:

<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>
    
ответ дан Locdarb 10.01.2011 в 15:17
0

Я искал аналогичное решение. Мне нужен стиль группового окна, в котором граница была закрыта только тогда, когда текст заголовка отсутствует.

Я не уверен, что это самое приятное решение, но оно отлично работает ...

У нас есть конвертер (работает только с текстом 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
}

и изменения в стиле группового окна:

<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>
    
ответ дан LukeN 09.09.2010 в 08:17
0

весь код и демонстрация его использования

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

    

ответ дан Chris 15.10.2013 в 21:27