How do I bind to a color in a WPF ColorAnimation?

Question

I would like to do something that is seemingly quite simple, but I cannot figure out how to do it. I have a ColorAnimation that is triggered when the MouseEnter event occurs. It simply changes the background color of a Border from one color to another color.

Unfortunately, I can't figure out how to put anything but hardcoded colors into this ColorAnimation. So it looks currently like this:

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="Red" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

However, I'd like do something either like this:

<SolidColorBrush x:Key="MyEventColor" Color="{Binding EventColor}" />

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="{StaticResource MyEventColor}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

Or like this:

<Style x:Key="MouseOverStyle">
<Style.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="{Binding EventColor}" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>
</Style>

When I try to do either of those, an exception gets thrown. For the first, it throws an exception telling me essentially that the "Color" property can't take a SolidColorBrush value...which makes sense...but it certainly doesn't help me out because the ColorAnimation won't let me animate the "(Border.Background).(SolidColorBrush)" property...it will only let me animate the "(Border.Background).(SolidColorBrush.Color)" property....

The exception on the second example basically tells me that it "Cannot freeze this Storyboard timeline tree for use across threads" ...so it sounds like the ColorAnimation is trying to do this binding in some other thread than the UI thread or something? Whatever it's trying to do...it isn't working.

How the heck can I do such a simple task?

Pieeyed

Answer 1

For the first one, you could use {StaticResource MyColor} with MyColor defined as such:

<Color x:Key="MyColor">#FF00FF00</Color>

However, this doesn't solve your problem: you can't bind to animation properties since those properties need to be frozen (unchangeable) for the animation to work. Either try to remove your dependence on a binding, or recreate the storyboard with the correct color from code behind when the color changes.

Sterilization

Unfortunately the first solution would only work if there was some way to bind a Color to one in the code behind. I can safely get rid of the binding for the "MouseEnter" event's animation...meaning that for every instance of this control, if the mouse is hovered over it, the control will turn to the same color. I cannot, however, safely get rid of the binding for the corresponding "MouseLeave" event's animation (which looks exactly the same) because each instance of this object could have a different BackgroundColor property, and when the mouse leaves that color needs to return to normal. – Pieeyed

For the MouseLeave animation you can use the exact same method to get the reverse effect by changing "To" to "From". That lets you specify the color to start and will use the original color in place of "To". One other thing to watch out for is that if a gradient brush is applied as the Background these animations will stop working. – Ringo