Binding to readonly property in generic.xaml for customControl (Button) - wpf

Question

I'm doing a CustomControl (button) using generic.xaml and dependency properties.
Here is my generic.xaml code :
<Style TargetType="{x:Type local:FlatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:FlatButton}">
<Grid MinHeight="50" MaxHeight="50" MinWidth="200" MaxWidth="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{TemplateBinding BackgroundDarker}">
</Grid>
<Grid Grid.Column="1" Background="{TemplateBinding Background}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" Foreground="White" FontWeight="Bold" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My customControl class :
Public Shared Shadows BackgroundProperty As DependencyProperty = DependencyProperty.Register("Background", GetType(SolidColorBrush), GetType(FlatButton))
Public Overloads Property Background As SolidColorBrush
Get
Return CType(GetValue(BackgroundProperty), SolidColorBrush)
End Get
Set(value As SolidColorBrush)
SetValue(BackgroundProperty, value)
End Set
End Property
Public Shared BackgroundDarkerProperty As DependencyProperty = DependencyProperty.Register("BackgroundDarker", GetType(SolidColorBrush), GetType(FlatButton))
Public ReadOnly Property BackgroundDarker As SolidColorBrush
Get
Return Background.Darker
End Get
End Property
And finally how I use my control in a UserControl :
<Grid>
<local:FlatButton Background="Red" />
</Grid>
When I put "Red" in the xaml of my FlatButton, the right part is well colored in Red (in VS and in runtime), but what I want is that the left part colores itself automatically with Darker red (it's an extension which works). But it seems not to be colored. I've no binding error in output.
What am I doing wrong ?
Thanks all.
-----EDIT----- :
Ok, to do that I made a converter which convert the "Background" value to a darker color.
I templateBinded the background of the left grid to "Background" with an instance of my converter.

Answer 1

While a converter will work, this functionality belongs inside the FlatButton control code. Use the Background's PropertyChangedCallback to update BackgroundDarker.
public class FlatButton : Button
{
// Background
public static new DependencyProperty BackgroundProperty = DependencyProperty.Register("Background", typeof(SolidColorBrush), typeof(FlatButton), new PropertyMetadata(OnBackgroundChanged));
public new SolidColorBrush Background { get { return (SolidColorBrush)GetValue(BackgroundProperty); } set { SetValue(BackgroundProperty, value); } }
// BackgroundDarker
public static DependencyProperty BackgroundDarkerProperty = DependencyProperty.Register("BackgroundDarker", typeof(SolidColorBrush), typeof(FlatButton));
public SolidColorBrush BackgroundDarker { get { return (SolidColorBrush)GetValue(BackgroundDarkerProperty); } private set { SetValue(BackgroundDarkerProperty, value); } }
private static void OnBackgroundChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// update BackgroundDarker
var btn = (FlatButton)d;
btn.BackgroundDarker = btn.Background.Darker();
}
static FlatButton()
{
// lookless control, get default style from generic.xaml
DefaultStyleKeyProperty.OverrideMetadata(typeof(FlatButton), new FrameworkPropertyMetadata(typeof(FlatButton)));
}
}
public static class SolidColorBrushExtension
{
public static SolidColorBrush Darker(this SolidColorBrush brush)
{
const double perc = 0.6;
return new SolidColorBrush(Color.FromRgb((byte)(brush.Color.R * perc), (byte)(brush.Color.G * perc), (byte)(brush.Color.B * perc)));
}
}