WPF GroupBox без пространства заголовка - PullRequest
19 голосов
/ 21 января 2010

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

альтернативный текст http://www.freeimagehosting.net/uploads/1d3f80b749.png

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

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

Спасибо

Ответы [ 5 ]

18 голосов
/ 21 января 2010

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


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

  • Щелкните правой кнопкой мыши GroupBox> Изменить шаблон> Редактировать копию> 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>
    
10 голосов
/ 21 января 2010

Вы можете эмулировать стиль группового блока, изменив границу на закругленные углы и другой цвет. Вот граница, которая выглядит довольно близко к границе GroupBox:

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

альтернативный текст http://img264.imageshack.us/img264/6748/borderm.png

5 голосов
/ 10 января 2011

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

Используйте следующий стиль на 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>
0 голосов
/ 15 октября 2013

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

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

0 голосов
/ 09 сентября 2010

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

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

У нас есть конвертер (работает только с текстовым банкоматом):

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