Candle

An animated candle to light your way in the dark. In this tutorial we cover embedding images in your application, animation using storyboards and programmatic versus declarative storyboards.

Setup

Before jumping into the tutorials head to developer.windowsphone.com to download the free tools and get them installed.

Our second application will be an animating candle, this’ll be done by looping through sixty different images at 20 frames per second. I source the images from Wikipedia.

We can do this a couple of different ways, the first would be to create a timer in a similar fashion to the “Minutes to Midnight” tutorial, the other method would be to use a storyboard. We can build this storyboard via a couple of methods, one is in xaml or we could build it programmatically. For this example I’ll build it programmatically but will show you the equivalent xaml.

###Setting up the UI Again we’re using a pretty simple interface, from the Toolbox drag an Image on to the screen, give it a name of CandleImage and set the following properties.

• Margin: Clear the ones the designer set.
• Horizontal and Vertical Alignment: Stretch.

###Generating the Storyboard Sadly the Expression Blend animation interface doesn’t handle the keyframe type we need DiscreteObjectKeyFrame so we’ll have to write the xaml ourselves or generate the storyboard in code, given the repetitive nature of the animation generating it makes the most sense.

In the Loaded event we create a new Storyboard and ObjectAnimationUsingKeyFrames setting the RepeatBehavior of the Storyboard to Forever and the Target of the animation to the CandleImage and it’s Source property.

We then loop through for each image in the animation and create a keyframe, we’ll have each frame at 50 milliseconds (approximately 20 fps) and set the value to the appropriate image.

We then add the storyboard to the page’s resources and start it.

public partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
 
        Loaded += OnLoaded;
    }
 
    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        var storyboard = new Storyboard
        {
            RepeatBehavior = RepeatBehavior.Forever
        };
 
        var animation = new ObjectAnimationUsingKeyFrames();
 
        Storyboard.SetTarget(animation, CandleImage);
        Storyboard.SetTargetProperty(animation, new PropertyPath("Source"));
 
        storyboard.Children.Add(animation);
 
        for(int i = 1; i <= 60; i++)
        {
            var keyframe = new DiscreteObjectKeyFrame
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(50 * i)),
                Value = String.Format("/Images/candle_{0:D2}.jpg", i)
            };
 
            animation.KeyFrames.Add(keyframe);
        }
 
        Resources.Add("CandleStoryboard", storyboard);
 
        storyboard.Begin();
    }
}
- See more at: http://compiledexperience.com/windows-phone/tutorials/candle#sthash.XCTew4al.dpuf

If we’d decided to build the storyboard in xaml then it would like roughly like the following sample (abbreviated for length). Much easier to build programmatically.

<Storyboard x:Key="CandleStoryboardXaml" RepeatBehavior="Forever">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CandleImage" Storyboard.TargetProperty="Source">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.50" Value="/images/candle_01.jpg" />
        <DiscreteObjectKeyFrame KeyTime="0:0:0.100" Value="/images/candle_02.jpg" />
        <DiscreteObjectKeyFrame KeyTime="0:0:0.150" Value="/images/candle_03.jpg" />
        <DiscreteObjectKeyFrame KeyTime="0:0:0.200" Value="/images/candle_04.jpg" />
        <DiscreteObjectKeyFrame KeyTime="0:0:0.250" Value="/images/candle_05.jpg" />
        ...
    </ObjectAnimationUsingKeyFrames>
</Storyboard>
- See more at: http://compiledexperience.com/windows-phone/tutorials/candle#sthash.XCTew4al.dpuf

Download the Code

The code for all the tutorials is available to download: Windows Phone 7 Tutorials Solution.