WPF GroupBox Style not being applied on custom control - wpf

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 )));
}

Related

How can modify the wpf Expander so that the expander button is next to header text and center aligned and gets expanded down

I want to customize my expander
I have a grid and one of the column is expander with header text before the expander button. And the expander should expand and fill the complete row as shown in the picture.
I couldn't post images so the link is below.
http://i.stack.imgur.com/zVkpR.png
Can please somebody give me some thoughts how can I achieve this.
Update:
I have used the control template and was able to modify as needed but struck with one thing how to make the expanded portion fill the entire row of the containing grid.
Here is the sample code:
<Window x:Class="ExpanderStyles.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="ExpanderHeaderStyle"
TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent"
SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="19"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Path x:Name="arrow" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="{TemplateBinding Foreground}"
StrokeThickness="1.5"
SnapsToDevicePixels="false"
Data="M 2,8 L 5.5,4.5 L 2,1">
<Path.LayoutTransform>
<RotateTransform Angle="0"/>
</Path.LayoutTransform>
</Path>
<ContentPresenter Grid.Column="0"
Margin="0,4,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SnapsToDevicePixels="True"
RecognizesAccessKey="True"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="true">
<Setter Property="Data"
Value="M 1,4.5 L 4.5,1 L 8,4.5"
TargetName="arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type Expander}"
TargetType="{x:Type Expander}">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="HorizontalContentAlignment"
Value="Center"/>
<Setter Property="VerticalContentAlignment"
Value="Stretch"/>
<Setter Property="BorderBrush"
Value="Transparent"/>
<Setter Property="BorderThickness"
Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"
SnapsToDevicePixels="true">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Canvas HorizontalAlignment="Center">
<ToggleButton x:Name="HeaderSite"
Margin="1"
MinWidth="0"
MinHeight="0"
Style="{StaticResource ExpanderHeaderStyle}"
IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"/>
</Canvas>
<ContentPresenter Grid.Row="1" x:Name="ExpandSite"
DockPanel.Dock="Bottom"
Visibility="Collapsed"
Focusable="false"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{TemplateBinding Padding}">
</ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded"
Value="true">
<Setter Property="Visibility"
Value="Visible"
TargetName="ExpandSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Column 1</TextBlock>
<Expander Grid.Row="0" Grid.Column="1" Header="Details" ExpandDirection="Left">
<Grid Background="Blue">
<TextBlock Text="Details content" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" Foreground="White"></TextBlock>
</Grid>
</Expander>
<TextBlock Grid.Column="2" Grid.Row="0">Column 3</TextBlock>
</Grid>
</Window>
Any body has idea how to fill the parent grid row from control template?

WPF Expander control dropdown panel

I would like to style my expander control in such way that it can have a drop down panel like that of combobox control.
Drop down panel should be like it can overlay above other items like that of combobox.
Here's the XAML style for expander which i'm using :
<Style TargetType="{x:Type Expander}">
<Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource Brush_ContainerButtonBorder}"/>
<Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource BrushTransparent}" BorderBrush="{StaticResource Brush_DropdownShadow}">
<ContentPresenter Focusable="false"/>
</Border>
<Border Grid.Row="0" x:Name="Border" Background="{StaticResource Brush_ButtonBorder}" Visibility="Collapsed" BorderThickness="1"/>
<ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" d:LayoutOverrides="VerticalAlignment" />
<ContentPresenter Margin="15,2,2,2" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Left" IsHitTestVisible="False"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpanderStyle_Dropdown" TargetType="{x:Type Expander}" BasedOn="{StaticResource TextStyle_BaseControl}">
<Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource Brush_ButtonBorder}"/>
<Setter Property="Foreground" Value="Black"/>
<!--<Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>-->
<Setter Property="FontSize" Value="{StaticResource FontSizeMedium}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="54"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource Brush_ButtonShadow}" CornerRadius="0,0,5,5" Margin="0,-5,0,0" Panel.ZIndex="1000">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false" Margin="5,10,5,5" Panel.ZIndex="1000"/>
</Border>
<Border Grid.Row="0" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7" Padding="5" Background="{StaticResource Brush_CZBlueSelected}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5,0,0,5" Padding="5" Grid.ColumnSpan="1" Margin="0,0,1,0"/>
<Border x:Name="Shadow" CornerRadius="5" Padding="5" Grid.ColumnSpan="2" BorderBrush="{StaticResource Brush_SearchinputBorder}" BorderThickness="0,0,0,2" Margin="0,0,0,-2"/>
<ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate_DropDown}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" Margin="1,0,0,0" Height="44" />
<ContentPresenter Margin="4" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now using the same in XAML screen as:
<Expander Name="expanderNextScan" Header="{Binding ElementName=listBoxExpander,Path=SelectedItem.Content}" ExpandDirection="Up" Grid.Column="3" Height="54" Width="Auto" Style="{DynamicResource ExpanderStyle_Dropdown}" >
<Grid Background="#FFE5E5E5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="listBoxExpander" Height="100" Width="{Binding ElementName=expanderNextScan,Path=ActualWidth}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,-10,0,0" Panel.ZIndex="5">
<ListBoxItem Content="Go to Next Scan" FontSize="{StaticResource FontSizeMedium}" IsSelected="True"/>
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Print with preview" />
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export as PDF"/>
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export to DICOM"/>
</ListBox>
</Grid>
</Expander>
Now want to style it in such a way that the list box coming in the expander drop down should have a z-index greater than the other controls on the screen such that it can overlay over other controls like that of combobox dropdown.
Please reply ASAP.

Add checkbox to ComboboxItem

I want to a one or two checkboxes in my combobox (like microsoft word) .
I put my checkbox in a separate Combobox Item, and set them item disabled. (I dont want that a user can select this item). But the checkbox is always disabled.
Is there another solution?
That's my code:
<ComboBox Height="36">
<ComboBoxItem Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<TextBlock Text="Item Title 1" Grid.Row="0" FontWeight="Bold" />
<TextBlock Text="Item Description 1" Grid.Row="1" FontStyle="Italic" />
</Grid>
</Grid>
</ComboBoxItem>
<ComboBoxItem Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<TextBlock Text="Item Title 2" Grid.Row="0" FontWeight="Bold" />
<TextBlock Text="Item Description 2" Grid.Row="1" FontStyle="Italic" />
</Grid>
</Grid>
</ComboBoxItem>
<ComboBoxItem Height="25" IsEnabled="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<CheckBox IsChecked="false" HorizontalAlignment="Left" Width="16" Height="16" IsEnabled="True" />
<Label Margin="10 0 0 0" HorizontalAlignment="Left" Content="I'm a checkbox ;)" />
</Grid>
</Grid>
</ComboBoxItem>
</ComboBox>
When you disable an element, you are disabling it as a container as well, therefore disabling all of its children too. If you want an item that is not disabled but also not selectable it should not be included in the list of items for the ComboBox. For your purposes it may be a better idea to use a Menu since that's what you're trying to duplicate, rather than trying to squeeze unintended functionality into a ComboBox.
Having said that, if you do stick with a ComboBox, to add an item outside of the list you can modify the Template for the ComboBox (use Blend to generate a copy for you):
<ComboBox Height="36">
<ComboBox.Template>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<StackPanel>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<CheckBox IsChecked="false" Content="I'm a checkbox ;)" Margin="10"/>
</StackPanel>
</Grid>
</ScrollViewer>
</Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
<ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ComboBox.Template>
<ComboBoxItem Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<TextBlock Text="Item Title 1" Grid.Row="0" FontWeight="Bold" />
<TextBlock Text="Item Description 1" Grid.Row="1" FontStyle="Italic" />
</Grid>
</Grid>
</ComboBoxItem>
<ComboBoxItem Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<TextBlock Text="Item Title 2" Grid.Row="0" FontWeight="Bold" />
<TextBlock Text="Item Description 2" Grid.Row="1" FontStyle="Italic" />
</Grid>
</Grid>
</ComboBoxItem>
</ComboBox>
Here I kept the entire default template but added in an extra StackPanel around the ItemsPresenter and put the new CheckBox in there. If you don't copy with Blend, to try the above template you'll also need the following xmlns (and the PresentationFramework.Aero reference in your project):
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
and these resources:
<Window.Resources>
<Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>
<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="ClickMode" Value="Press"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true">
<Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
<Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>
</Grid>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

How can i bind parent's property to its child's property?

I have a GroupBox, which is defined like this
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Groupbox"
>
<Style TargetType="local:GroupBox">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:GroupBox">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
<Border.Clip>
<GeometryGroup FillRule="EvenOdd">
<RectangleGeometry x:Name="FullRect" Rect="0,0,300,200"/>
<RectangleGeometry x:Name="HeaderRect" Rect="6,0,100,100"/>
</GeometryGroup>
</Border.Clip>
</Border>
<ContentPresenter Grid.Row="2" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ContentControl x:Name="HeaderContainer" Margin="6,0,0,0" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Left">
<ContentPresenter Margin="3,0,3,0" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"/>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And i'm using this control like this
<Controls:GroupBox x:Name="GroupBox">
<Controls:GroupBox.HeaderTemplate>
<DataTemplate>
<CheckBox "Header" x:Name="cbHeader"/>
</DataTemplate>
</Controls:GroupBox.HeaderTemplate>
<Controls:GroupBox>
So, well, my questions - how can i bind property IsEnabled of GroupBox to the Checkbox property IsChecked?
Thanks in advance.
Didn't try it but you should be able to do something like this:
<Controls:GroupBox x:Name="MyGroupBox">
<Controls:GroupBox.HeaderTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path=IsEnabled, ElementName=MyGroupBox, Mode=TwoWay}" Content="Header" x:Name="cbHeader" />
</DataTemplate>
</Controls:GroupBox.HeaderTemplate>
<Controls:GroupBox>
In fact there was no need to define DataTemplate. This code works the same way.
<Panels:GroupBox>
<Panels:GroupBox.Header>
<CheckBox Content="Header" x:Name="cbHeader" IsChecked="{Binding IsHeaderChecked}" />
</Panels:GroupBox.Header>
<ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" IsEnabled="{Binding Path=IsChecked, ElementName=cbHeader}"/>
</Panels:GroupBox>

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