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?

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.