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.
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 UserControl
s 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.
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?
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>