How to synchronize animations across usercontrols in WPF

Question

I am creating several usercontrols in a wrap panel. I have a view model bound to the usercontrol and I have an animation triggered to a property in the view model. Very simple toggle color from red to transparent to simulate flashing.

<Storyboard x:Key="alertAnimation" RepeatBehavior="Forever" AutoReverse="True" >
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                  Storyboard.TargetName="TileBorder"
                                  BeginTime="00:00:00"
                                  RepeatBehavior="Forever"
                                  AutoReverse="True"
                                  >
        <DiscreteColorKeyFrame Value="Red"/>
        <DiscreteColorKeyFrame KeyTime="00:00:00.500" Value="Transparent" />
    </ColorAnimationUsingKeyFrames>

</Storyboard>

This works just fine. However, since I load multiple usercontrols asynchronously the blinking animations are not synchronized so they all blink at different times. There is now a requirement that anything blinking on the screen needs to all blink at the same rate/time. Is there a way to sync these animations? I cannot seem to find an example anywhere that fits what I am trying to accomplish. Is there a way to use the ParallelTimeline, add all the animations to it and start/stop them from a single controller? Any examples how to accomplish this out there?

EDIT 4/20 Would it be better to have the animation defined in a style.xaml file and have a "global" storyboard that each controls adds its "blink" animation to and have the main UI start the storyboard?

Answer 1

I could not find a good way to control multiple animations across multiple usercontrols so I ended up not using animation in the usercontrol but instead use an animation to simply change a dependencyproperty in a static object and have all usercontrols that need to blink in some fashion bind to that property. There are various ways to produce the desired results I wanted but ultimately I now had a way for all my controls to know when blink was on and then off so that everything is synchronized.

I got the idea and sample code from the following site: How to synchronize animations across usercontrols in wpf

I made a few modifications to it but overall it did exactly what I needed it to do.