How to create silverlight sequence animation programmatically?

Question

I need to animate a rectangle to move horizontally first, then after 2 second make it move vertically. All this should be done programmatically.

Anybody can help me? Thanks!

Answer 1

Using the following XAML:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Canvas x:Name="LayoutRoot">
    <Rectangle x:Name="myBox" Fill="Red" Height="100" Width="100" Canvas.Left="0" Canvas.Top="0" />
  </Canvas>
</UserControl>

You could create the animation programatically using this:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        Loaded += MainPage_Loaded;
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var moveAnimation = CreateAnimation(this.myBox);
        moveAnimation.Begin();
    }

    public Storyboard CreateAnimation(FrameworkElement element)
    {
        var storyboard = new Storyboard();

        var downAnimation = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(downAnimation, element);
        Storyboard.SetTargetProperty(downAnimation, new PropertyPath(Canvas.TopProperty));
        downAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)),
            Value = 200
        });
        storyboard.Children.Add(downAnimation);

        var overAnimation = new DoubleAnimationUsingKeyFrames();
        Storyboard.SetTarget(overAnimation, element);
        Storyboard.SetTargetProperty(overAnimation, new PropertyPath(Canvas.LeftProperty));
        overAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)),
            Value = 0
        });
        overAnimation.KeyFrames.Add(new EasingDoubleKeyFrame
        {
            KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)),
            Value = 200
        });
        storyboard.Children.Add(overAnimation);


        return storyboard;
    }
}