WPF GroupBox без пространства заголовка
Легкий, я хотел бы иметь GroupBox без пространства заголовка
alt text http://www.freeimagehosting.net/uploads/1d3f80b749.png
Ближайшая вещь - это граница, но граница "по умолчанию" не имеет того же стиля, что и поле группы.
Какой самый простой способ (наименьший xaml/code) получить желаемый GroupBox?
Спасибо
Ответы
Ответ 1
Если вы действительно не хотите границы, тогда могут быть эти 2 решения:
(1) Редактировать шаблон в blend:
- Щелкните правой кнопкой мыши 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>
Ответ 2
Вы можете эмулировать стиль группового поля, изменив границу, чтобы иметь закругленные углы и другой цвет. Вот граница, которая выглядит довольно близко к границе 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
Ответ 3
Основываясь на ответе Михира Гокани, вы можете изменить шаблон по умолчанию, чтобы использовать триггер, чтобы изменить заполнение заголовка ничем, когда заголовок пуст или пуст.
Используйте следующий стиль в 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>
Ответ 4
Я искал аналогичное решение. Мне нужен стиль группового окна, в котором граница была закрыта только тогда, когда текст заголовка отсутствует.
Я не уверен, что это самое приятное решение, но оно отлично работает...
У нас есть конвертер (работает только с текстом 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>
Ответ 5
весь код и демонстрация его использования
<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>
