Binding brush color to properties in ControlTemplate

I am trying to make a CustomControl that derives from Button, which simply shows as a colored rectangle. I want to have two properties on my control that I can set, which specify the normal color (ColdColor), and another color that will be used when the mouse is over the control (HotColor).

I can't figure out how to get the binding set up between the brush color and the control properties. This is my code:

Generic.xaml:

<Style TargetType="{x:Type local:TestCustomControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TestCustomControl}">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Name="MyBorder">
                    <Border.Background>
                        <!-- This works: -->
                        <!--<SolidColorBrush Color="Green" />-->

                        <!-- This doesn't work: -->
                        <SolidColorBrush Color="{TemplateBinding ColdColor}" />
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <!-- This works: -->
                                    <!--<ColorAnimation Storyboard.TargetProperty="Background.Color" Storyboard.TargetName="MyBorder" To="Red"  Duration="0:0:0.2"/>-->

                                    <!-- This doesn't work: -->
                                    <ColorAnimation Storyboard.TargetProperty="Background.Color" Storyboard.TargetName="MyBorder" To="{TemplateBinding HotColor}"  Duration="0:0:0.2"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TestCustomControl.cs:

public class TestCustomControl : Button
{
    static TestCustomControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(TestCustomControl), new FrameworkPropertyMetadata(typeof(TestCustomControl)));
    }

    public Color HotColor
    {
        get { return (Color)GetValue(HotColorProperty); }
        set { SetValue(HotColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for HotColor.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HotColorProperty =
        DependencyProperty.Register("HotColor", typeof(Color), typeof(TestCustomControl), new UIPropertyMetadata(new Color()));

    public Color ColdColor
    {
        get { return (Color)GetValue(ColdColorProperty); }
        set { SetValue(ColdColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ColdColor.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ColdColorProperty =
        DependencyProperty.Register("ColdColor", typeof(Color), typeof(TestCustomControl), new UIPropertyMetadata(new Color()));
}

Usage in MainWindow.xaml:

<my:TestCustomControl ColdColor="#FF0000AF" HotColor="#FFFF00AF"/>

EDIT: To say that "doesn't work" means that the TestCustomControl is entirely transparent.

Answers


There is no obvious problem (afaik), I would change this piece of code:

UIPropertyMetadata(new Color())

to

UIPropertyMetadata(Colors.White)

and see if its the 'new Color()' that's the problem

EDIT -

if the above didnt work, try changing this

<SolidColorBrush Color="{TemplateBinding ColdColor}" />

to this

<SolidColorBrush Color="{Binding 
    RelativeSource={RelativeSource TemplatedParent}, 
    Path=ColdColor}" />

Need Your Help

Why does my call from flash to Javascript fail in IE9?

javascript flash internet-explorer internet-explorer-9

I have a couple of buttons in my flash application that call two different javascript functions. They work in all browsers except IE9 (I haven't tried earlier IEs). My code to call the function is

SQL to pull data sorted by column then sort it another way

mysql sorting

I'm pulling the top 15 locations from the database by sorting based on the usedby column, a running total of how many records use that location. The problem is, this returns them sorted by usedby w...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.