Notes on using Animations in XAML/C#

Notes on animations using transitions:

To create an animation, you need the following:

  • Storyboard…which contains…
  • Animations…that are based around…
  • Timelines

What the animations do is make changes on a variable (target property) that is associated with your object (target). For example, if you wanted to animate the opacity of a rectangle, you would assign the object using the static method Storyboard.SetTarget(<animation object>, ) then Storyboard.SetTargetProperty(<animation object>, “Opacity”). The following code shows this as pulled from an app I have been building:

Rectangle rect;
…
            Storyboard storyboard = new Storyboard();
            DoubleAnimation da = new DoubleAnimation();

            da.From = 0;
            da.To      = 1;
            da.Duration = DurationHelper.FromTimeSpan(TimeSpan.FromMilliseconds(500));
            da.EnableDependentAnimation = true;            
            da.EasingFunction = new PowerEase();

            Storyboard.SetTarget(da, rect);
            Storyboard.SetTargetProperty(da, "Opacity");

            storyboard.Children.Add(da);

            storyboard.Begin();


A common pattern that you might see here also is the storyboard.Completed method which … is called when a storyboard completes. If you want to see some of the code that I created to demonstrate this, see my Metro style lights out game.