Attempts to animate a SolidColorBrush static resource.

Question

What i would like

I want to reuse some styles in several types of UserControl .

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

---

How am i trying to do this

To this end, I defined some common colors in the resource dictionary, for example:

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

... and I also defined StoryBoard in this dictionary, for example:

 <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> 

Then I added the following to the top level of 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 other other UserControl that are children of this, I re-import the ResourceDictionary as above, and use {StaticResource StatusErrorBackground} for Background .

These items are colored red (as in the SolidColorBrush ad), but they do not blink.

---

Fuzzy understanding so far

Maybe this will not result in the corresponding PropertyChanged notifications for these elements, so they do not redraw? Or something like that. The Color property on SolidColorBrush not a dependency property, but SolidColorBrush implements IAnimatable , so obviously the magic happens behind the scenes here, I don’t understand.

Or is it because I import the same resource dictionary in two different places (once at my top level UserControl plus once in my child), resulting in two independent StaticResource references? If you import the same ResourceDictionary file into two different controls, does it create independent resources for them? In this case, I could fix this by pulling it at the application level, I think ...

Can someone tell me what I am doing wrong and how can I fix it?

Answer 1

I cannot say why, but it works if you add a dummy object, for example. A rectangle that uses SolidColorBrush for its Fill property and then animates it to Fill . Now SolidColorBrush Color becomes 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 that I am late here, but I found this question when I tried to revive the flowers that are held in solid brushes. Brushes are part of a resource dictionary that other people use, and I don't want to change. I just did it, really fast, to try, and it seemed 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 xaml as follows:

  <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>