Trying to animate a SolidColorBrush static resource

Question

What I'd like

I want to reuse some styles across multiple UserControl types.

I would like the background of some Border controls to flash, and I'd like them all to use the same style, static resource and animation, so that they all flash in sync.

---

How I'm trying to do it

To that end, I have defined some common colours in a resource dictionary, like so:

<SolidColorBrush x:Key="StatusErrorBackground" Color="#440000" />

...and I have also defined a StoryBoard in this dictionary, like so:

<Storyboard x:Key="BackgroundAnimation">
    <ColorAnimation
        Storyboard.Target="{StaticResource StatusErrorBackground}"
        Storyboard.TargetProperty="Color"
        From="#440000"
        To="#ff0000"
        Duration="0:0:1"
        RepeatBehavior="Forever"
        AutoReverse="True"/>
</Storyboard>

I've then added the following to a top-level UserControl:

<FrameworkElement.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="CommonResources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</FrameworkElement.Resources>

<FrameworkElement.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource BackgroundAnimation}"/>
    </EventTrigger>
</FrameworkElement.Triggers>

...and then in various other UserControls that are children of that, I re-import the ResourceDictionary as above and use the {StaticResource StatusErrorBackground} for a Background.

The elements in question are coloured red (as in the SolidColorBrush declaration), but they're not flashing.

---

Fuzzy understanding thus far

Maybe doing this doesn't raise the appropriate PropertyChanged notifications on the elements in question, so they're not redrawn? Or something like that. The Color property on SolidColorBrush isn't a dependency property, but SolidColorBrush implements IAnimatable, so there's obviously magic happening behind the scenes here I don't understand.

Or is it that because I'm importing the same resource dictionary in two different places (once in my top-level UserControl plus once in my child) that I end up with two independent StaticResource references? If you import the same ResourceDictionary file in two different controls, does it create independent resources for each? In which case I might be able to fix this by pulling it in at an app level, I guess...

Can anyone tell me what I doing wrong and how I might go about fixing it?

Answer 1

I can't really say why, but it works if you add a dummy object, e.g. a Rectangle that uses the SolidColorBrush for its Fill property, and then animate that Fill. Now the SolidColorBrush's Color gets animated.

<SolidColorBrush x:Key="StatusErrorBackground" Color="#440000" />
<Rectangle x:Key="StatusErrorBackgroundRectangle" Fill="{StaticResource StatusErrorBackground}"/>

<Storyboard x:Key="BackgroundAnimation">
    <ColorAnimation 
        Storyboard.Target="{DynamicResource StatusErrorBackgroundRectangle}" 
        Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" 
        ... />
</Storyboard>

Answer 2

I know I'm late here, but I found this question when I was attempting to animate to and from colours that are held in solid brushes. The brushes are part of a resource dictionary that other people are using, and I don't want to change. I just made this, very quickly to try out and it appeared to work.

public class SolidColorAnimation : ColorAnimation
{
    public SolidColorBrush ToBrush
    {
        get { return To == null ? null : new SolidColorBrush(To.Value); }
        set { To = value?.Color; }
    }
}

and use it in the xaml like this:

        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard >
                        <ui:SolidColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" ToBrush="{StaticResource NavButtonRolloverBrush}" Duration="0:0:0.75"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard >
                        <ui:SolidColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" ToBrush="{StaticResource NavButtonBrush}" Duration="0:0:0.25"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>

Answer 3

just use

<Color x:Key="name" A="0" R="255" G="255" B="255"/>

insteade of

<SolidColorBrush x:Key="name" Color="#0fff"/>

that works for me