Best way to play animations synchronously?

Question

My Application will download data from the web, whenever the user will trigger. The user can trigger multiple downloads. Each download is listed in a stack panel an a busy icon is shown on each item which is rotating while downloading.

<Image x:Name="rotatingCircle" Source="{StaticResource busy_icon}" Height="30" RenderTransformOrigin=".5,.5" Visibility="Visible">
            <Image.RenderTransform>
                <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
            </Image.RenderTransform>
            <Image.Style>
                <Style>
                    <Style.Triggers>
                        <Trigger Property="Image.IsEnabled" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.Angle"
                                From="0"
                                To="360"
                                Duration="0:0:1"
                                RepeatBehavior="Forever"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

How can I synchronise the animation, so that every circle is rotating with the same angle, regardless when it was started?

Answer 1

In my case it was enough to store Storyboards in a list. Every time when a animated icon was added I simply iterate through all Storyboards and started them again (sb.Begin()). There is a small flicker, because every element is starting at the initial position, but they are running absolut synchronously.