WPF Groupbox Control Header with Button and text aligned Opposite - wpf

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>

Related

Show legend item into two column

I am using WpfToolkit to draw a Pie chart,and I like to show my legend into two column due to my legend is to much,how can I solve it?
<chartingToolkit:Chart Height="auto" x:Name="PieChart2" Title="{Binding}"
VerticalAlignment="Top" Grid.Row="0" Grid.ColumnSpan="3" Margin="5" LegendTitle="Label" >
<chartingToolkit:PieSeries DependentValuePath="Value"
IndependentValuePath="Key" ItemsSource="{Binding}">
</chartingToolkit:PieSeries>
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</charting:Chart.LegendStyle>
</chartingToolkit:Chart>
Thanks in advance!
As per your need , I have changed the ControlTemplate of the Legend a litte as shown below
<ControlTemplate x:Key="LegendControlTemplate1"
TargetType="{x:Type visualizationToolkit:Legend}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<visualizationToolkit:Title x:Name="HeaderContent"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
Grid.Row="0"
Style="{TemplateBinding TitleStyle}" />
<ScrollViewer BorderThickness="0"
IsTabStop="False"
Padding="0"
Grid.Row="1"
VerticalScrollBarVisibility="Auto">
<!--<ItemsPresenter x:Name="Items"
Margin="10,0,10,10" >
</ItemsPresenter>-->
<ItemsControl x:Name="Items"
Margin="10,0,10,10"
ItemsSource="{TemplateBinding ItemsSource}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
I am not sure whether this suites your requirement or not..Please mark it as answer if satisfied.

Add Label that move along my custom Progress-Bar

I have this GridViewColumn.CellTemplate:
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Margin="-6,0,0,0">
<ProgressBar Name="progressBarColumn"
Minimum="0"
Maximum="100"
Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource CustomProgressBar4}"
Width="350"
Margin="0,0,0,0"/>
<TextBlock x:Name="fileNameTextBlock"
Text="{Binding File}"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
Inside my Progress-Bar instead of show the Percentage i change it to show my Binding File:
Text="{Binding File}"
And my Style:
<Style x:Key="CustomProgressBar4" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid x:Name="Root">
<Border Name="PART_Track"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"/>
<Border Name="PART_Indicator"
CornerRadius="5"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So my Progress-Bar is filled according my Progress value (binding) and i want to add simple Label\TextBlock that will locate on the right side of my Progress-Bar and will show my Progress value.
Any suggestions how to do that ?
just simply define two Grid columns then add a TextBlock to the second column
<Style TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="Root" Grid.Column="0">
<Border Name="PART_Track"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="5" />
<Border Name="PART_Indicator"
HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
CornerRadius="5" />
</Grid>
<TextBlock Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to change my Group-box style

So this is my GroupBox:
<GroupBox
Header="My header"
Background="Transparent"
Foreground="Gainsboro"
BorderBrush="Gainsboro" />
And i have several things that i want to change/issues:
The Foreground is still in black although i have changed it.
My boder around the Header: i want to remove it in order to achieve this kind of style (the header is over the border):
All header is with upper case.
Edit:
After add the style that user #mm8 suggested, this is the results:
Why i can see duplicate border ?
You could override the template for the GroupBox:
<GroupBox Header="My header" Style="{x:Null}">
<GroupBox.Template>
<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.OpacityMask>
<MultiBinding ConverterParameter="7">
<MultiBinding.Converter>
<BorderGapMaskConverter />
</MultiBinding.Converter>
<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>
<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Background="LightGreen" BorderBrush="Black" CornerRadius="2" BorderThickness="1">
<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>
</GroupBox.Template>
<TextBlock>content...</TextBlock>
</GroupBox>
Create your own set of controls to have full control, similar to this:
<Grid Width="100" Height="200" Background="DodgerBlue">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="1" BorderBrush="Gainsboro">
<TextBlock Foreground="Gainsboro">Header</TextBlock>
</Border>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Gainsboro">
<!--Content-->
</Border>
</Grid>

GroupBox's ControlTemplate and RowDefinitions's Height

I was learning how to change the ControlTemplate and came across this post. I copied the ControlTemplate and created a GroupBox.
<UserControl x:Class="MyTestApp.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="130" d:DesignWidth="250">
<Grid>
<Grid.Resources>
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="CheckedGroupBoxStyle" 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.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
<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="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
<Border.OpacityMask>
<MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
<Binding Path="ActualWidth" ElementName="Header"/>
<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>
<Border x:Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Padding="3,1,3,0">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Style="{StaticResource CheckedGroupBoxStyle}">
<GroupBox.Header>
<CheckBox>GroupBox1</CheckBox>
</GroupBox.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Item A" Grid.Column="0" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="0"></TextBox>
<TextBlock Text="Item B" Grid.Column="0" Grid.Row="1" />
<TextBox Grid.Column="1" Grid.Row="1"></TextBox>
<TextBlock Text="Item C" Grid.Column="0" Grid.Row="2" />
<TextBox Grid.Column="1" Grid.Row="2"></TextBox>
<TextBlock Text="Item D" Grid.Column="0" Grid.Row="3" />
<TextBox Grid.Column="1" Grid.Row="3"></TextBox>
</Grid>
</GroupBox>
</Grid>
</Grid>
</UserControl>
The problem is there is a border around the Grid that's inside the GroupBox. It can be removed by changing Height="Auto" to Height="*" for RowDefinition. If I don't use the CheckedGroupBoxStyle, then the border will not show up either. I want know why because the aforementioned post says the resulting style is almost identical to the default template of the control.
It appears as though you have not added the BorderGapMaskConverter to your code example. After a quick search on MSDN, I found that it is in fact a Converter that is included in the .NET Framework. You can find details of it on the BorderGapMaskConverter Class page. You will be able to use it if you are using .NET 3.0 or above.
UPDATE >>>
No sorry, 'implemented' is no longer the correct word... initially, I thought that you would have to implement your own Converter. However, now that I found out that it is included in the .NET Framework, you just need to add a reference to it in your XAML Resources section like in the example in the other post:
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
Mind you, you should have had a warning in the Visual Studio Error List saying something like:
The resource "BorderGapMaskConverter" could not be resolved.

WPF GroupBox with no header space

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>

Resources