CommandBinding broken in inner Custom Control when nesting two Custom Controls of the same type.
- by Fredrik Eriksson
I've done a Custom Control in form of a GroupBox but with an extra header which purpose is to hold a button or a stackpanel with buttons at the other side.
I've added the a Dependency Property to hold the extra header and I've connected the customized template.
Everything works fine until I put one of these controls in another one. Now the wierd stuff begins(at least in my eyes xP), the command binding in the inner control simply isn't set. I tried to use Snoop to gather some data, the see if the inherits is broken and when I clicked on the buttons which isn't doing what I want it to, boom, breakpoint triggered.
So in some wierd way the Command isn't set until something that I don't know what it is, happens, which snoops triggers.
I've also tried to put the buttons in the regular Header property and that works fine, but not with my own made. I could just switch places with them to make it like I want but now I'm curious to know where the problem lies...
Now I wonder, what can I've missed?
The control class:
public class TwoHeaderedGroupBox : GroupBox
{
static TwoHeaderedGroupBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(TwoHeaderedGroupBox), new FrameworkPropertyMetadata(typeof(TwoHeaderedGroupBox)));
}
public static DependencyProperty HeaderTwoProperty = DependencyProperty.Register("HeaderTwo", typeof(object), typeof(TwoHeaderedGroupBox), new FrameworkPropertyMetadata());
public object HeaderTwo
{
get { return (object)GetValue(HeaderTwoProperty); }
set { SetValue(HeaderTwoProperty, value);}
}
}
And here is the Template (which by the way is created by blend from the beginning):
<ControlTemplate TargetType="{x:Type Controls:TwoHeaderedGroupBox}">
<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" VerticalAlignment="Center">
<ContentControl Content="{TemplateBinding Header}" 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>
<Border x:Name="HeaderTwo" Grid.Column="2" Padding="3,5,3,5" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Right">
<ContentControl Content="{TemplateBinding HeaderTwo}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" DataContext="{TemplateBinding DataContext}"/>
</Border>
</Grid>
</ControlTemplate>
