R – Multiple Storyboards or Animations that share the same timeline

animationsynchronizationwpfxaml

I have a a bunch of WPF UserControls that internally trigger some animations upon user interactions. All animations have repeatbehavior = "true" and all animations have the same duration. Now I would like synchronize all those animations on one timeline so they are fading in and out in sync. No matter when the user triggerd the animations. For example if the animations all last 3 secs and the user triggers the 2nd animation 1.5 secs after the first, I still want the animations reach their maximum at the same time.
Maybe I can define a global time line in a global resource dictionary that all animations that are defined somewhere in the UserControls can use? Preferably XAML only.

Best Answer

Simply add all of your animations to a single TimelineCollection. Then add that TimelineCollection to your Storyboard.Children. Then they will all fire simultaneously.

Related Solutions

C# – How to animate an image along a circular path in WPF

Define your MainWindow (or Page) class as follows:

<Window x:Class="TestCustomTab.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <PathGeometry x:Key="path" Figures="M 0,50 A 50,50 0 1 1 100,50 " />         
        <Storyboard x:Key="ellipseSB">
            <DoubleAnimationUsingPath Storyboard.TargetName="ellipse"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                      PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever"
                                      AutoReverse="True" Source="X" />
            <DoubleAnimationUsingPath Storyboard.TargetName="ellipse"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                      PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever"
                                      AutoReverse="True" Source="Y" />
        </Storyboard>        
    </Window.Resources>
    <Grid x:Name="grid">
        <Canvas>
            <Ellipse x:Name="ellipse" Width="10" Height="10" Stroke="Black" Fill="Black"
                     RenderTransformOrigin="0.5,0.5" />            
            <Path Stroke="Red" StrokeThickness="1" Canvas.Left="5" Canvas.Top="5"
                  Data="{StaticResource path}"/>
        </Canvas>        
        <Button VerticalAlignment="Bottom" Content="Start" Click="Button_Click"/>
    </Grid>
</Window>

Then in codebehind define Button_Click event handler:

private void Button_Click(object sender, RoutedEventArgs e)
{
    var sb = FindResource("ellipseSB") as Storyboard;
    if (sb != null) sb.Begin();
}

It will animate the 10-by-10 ellipse exactly along the defined arc segment which is a half of a circle.

Hope this helps.

Best Answer

Related Solutions

C# – How to animate an image along a circular path in WPF

Related Topic