I have a default GroupBox style in which I want to make the default header font color blue. I can't seem to get the color to apply when set from within the ControlTemplate in the style. Since it's just using a ContentPresenter for the header and that doesn't have a Foreground property, I'm setting TextElement.Foreground (I've also tried TextBlock.Foreground) on the ContentPresenter, which as I understand it should make all TextBlock children of the ContentPresenter have a foreground of blue. However setting this has no effect.
I've also tried adding a resource to the ContentPresenter to override the default style of TextBlock to give it a blue foreground, which didn't help either. If I set the Foreground property on the GroupBox itself, every TextBlock including both the header and the content of the GroupBox gets its color set to that, but I only want to change the color of the header. I don't want to give the header an explicit HeaderTemplate because I want the user to be able to put whatever content they want in the header, I just want that content to have a blue foreground.
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="{DynamicResource TabItem.Selected.BorderBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="FontSize" Value="18"/>
<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="5" Grid.Row="1" Grid.RowSpan="3"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="5" 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>
<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter TextElement.Foreground="Blue" 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>
Related
Is it possible to display the header of a GroupBox above the border and not in the border?
<GroupBox>
<GroupBox.Header>
<TextBlock
Text="Test">
</TextBlock>
</GroupBox.Header>
</GroupBox>
You have to edit the control template of the GroupBox and adapt it. You can extract the default control template using Visual Studio or Blend. It contains an opacity mask that creates the gap for the header text in the border of the group box. You have to remove this border and move the header like this:
<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 Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" CornerRadius="4" Grid.ColumnSpan="4" Grid.Column="0" Grid.RowSpan="3" Grid.Row="1"/>
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="White" CornerRadius="4" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="White" CornerRadius="2"/>
</Border>
</Border>
<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0">
<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>
Then you can use the style in your XAML explictly like this to apply the control template:
<GroupBox Style="{StaticResource GroupBoxStyle}" Header="Test">
<!-- ...your content. -->
</GroupBox>
Alternatively define the group box style as implicit style to automatically apply it on all GroupBoxes.
<Style TargetType="{x:Type GroupBox}">
<!-- ...same as above. -->
</Style>
I have created a custom control so simply draw the border of a geroupbox in red if there is an error. for some reason when I use the control the foreground colour doesn't get set correctly it defaults to white instead of green. My code is as follows:
public class ErrorGroupBox : GroupBox
{
static ErrorGroupBox()
{
}
public bool ErrorState
{
get { return (bool)GetValue(ErrorStateProperty); }
set { base.SetValue(ErrorStateProperty, value); }
}
public static readonly DependencyProperty ErrorStateProperty =
DependencyProperty.Register("ErrorState", typeof(bool), typeof(ErrorGroupBox), new UIPropertyMetadata(false));
}
The style is:
<Style x:Name="ErrorGroupBox" TargetType="local:ErrorGroupBox">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="FontFamily" Value="Tahoma"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Grid SnapsToDevicePixels="True" Margin="5">
<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 Background="{TemplateBinding Background}" BorderBrush="Transparent"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4" Grid.Column="1 " Grid.ColumnSpan="4"
Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"/>-->
<!--The Title-->
<Border x:Name="Header" Grid.Column="2" Grid.RowSpan="2" HorizontalAlignment="Left"
Padding="3,1,3,0" VerticalAlignment="Stretch" >
<Border.Effect>
<DropShadowEffect BlurRadius="5" Direction="334"/>
</Border.Effect>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True" Height="Auto"
VerticalAlignment="Center"
HorizontalAlignment="Center"
OpacityMask="#FF3844BD" Margin="0,1,0,0">
</ContentPresenter>
</Border>
<ContentPresenter Margin="5"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2" />
<Border BorderBrush="#BFBFBF" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Margin="0">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="local:ErrorGroupBox.ErrorState" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
<Trigger Property="local:ErrorGroupBox.ErrorState" Value="False">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I use the control as follows:
<controls:ErrorGroupBox ErrorState="{Binding Error}" Header="Test Type" Margin="20,20,0,0" Name="groupBox1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="226" Grid.Column="0">
If this is a default theme style you need to specify a different metadata type in your static constructor:
public class ErrorGroupBox : GroupBox
{
static ErrorGroupBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ErrorGroupBox), new FrameworkPropertyMetadata(typeof(ErrorGroupBox )));
}
I want to achieve such an interface using WPF groupbox control
Is there a way to achieve such an interface with WPF groupbox control?
A simple option is to just overlap the controls and then play around with margins
<Grid>
<GroupBox Header="Title" Margin="0,3,0,0" />
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,10,0">
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
If you wanted a re-usable style then you would need to extract the GroupBox's control template and modify that. Something like
<Page.Resources>
<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 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>
<StackPanel Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" >
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Grid>
<GroupBox Header="Title" Style="{StaticResource GroupBoxStyle1}"></GroupBox>
</Grid>
</Grid>
I needed the same thing, found the answer here:
http://wpf.2000things.com/2013/06/05/835-displaying-custom-content-in-a-groupbox-header/
Don't know which version of .NET
Simple example:
<GroupBox>
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Button Content="Click Me"/>
<Button Content="Click Me Too"/>
</StackPanel>
</GroupBox.Header>
<TextBlock Text="Content of box"/>
</GroupBox>
I have an own control which derives from itemscontrol with an own template. I am using a Canvas inside the itemscontrol as ItemsPanel. Why f.e. on resize of the window the items also can be outside of the itemscontrol?
Templates:
<Style TargetType="{x:Type local:Dashboard}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Dashboard}">
<Grid>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
The items use this:
<Style TargetType="{x:Type local:Widget}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Widget}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="2" BorderBrush="Black" Background="WhiteSmoke"
x:Name="Part_Header">
<ContentPresenter ContentSource="Header"/>
</Border>
<Border Grid.Row="1" BorderThickness="2" BorderBrush="Black" Background="WhiteSmoke">
<Grid>
<ContentPresenter />
<ResizeGrip x:Name="Part_Resize"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Cursor="SizeNWSE" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Depending on your alignment and margin settings, resizing a parent can cause children to move outside of a parent's boundaries. The easiest way I've found to check this is to load Blend and resize the parent, watching how contained controls move. By tweaking the anchors in Blend (which changes alignments and margins), you should be able to troubleshoot why they move.
Easy one, I would like to have a GroupBox with no header space
The closest thing is a border, but the border "by default" does not have the same Style as the group box.
What's the easiest way (least xaml / code) to get the desired GroupBox ?
Thanks
If you really don't want a border, then there can be these 2 solutions:
(1) Edit template in blend :
Right click on GroupBox > Edit Template > Edit Copy > OK
Search for section
<Border.OpacityMask>
<MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
......
</MultiBinding>
</Border.OpacityMask>
Delete this (above mentioned) section.. You have just removed the "gap"
Now this will work if you do not set the header (as you have shown in example). However if you set the header, it'll go behind the border. So to correct this, just set Panel.ZIndex="-1" in the border that was enclosing the section you just deleted (it looks like <Border BorderBrush="White" BorderThickness= ...)
(2) Use duplicate GroupBox and flip it horizontally and place it beneath original groupbox:
Put this code below your groupbox (assuming your groupbox's name is '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>
Enclose both these GroupBox in a Grid like this:
<Grid>
<GroupBox x:Name="OriginalGroupbox" Header="Mihir" ...>
...
</GroupBox>
<GroupBox Header="" Width="{Binding ActualWidth, ElementName=OriginalGroupbox}" ...>
...
</GroupBox>
</Grid>
You can emulate the style of the group box by changing your border to have rounded corners and a different color. Here is a border that looks pretty close to the GroupBox border:
<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
Building on Mihir Gokani's answer, you can change the default template to use a Trigger to change the header's padding to nothing, when the header is null or empty.
Use the following style on the GroupBox, should fix it.
<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>
Note the only addition is:
<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>
the whole code and demo of its use
<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>
I was looking for a similar solution. I needed a group box style where the border was closed only when there is no header text.
I'm not convinced it's the nicest solution, but it works fine...
We have a converter (works with text only 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
}
and the modifications to the groupbox style:
<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>