Ticking in Silverlight Clock + Source Code


background A few people have asked how I got the second hand to tick in the Silverlight timepiece that I build; looking at the animation XAML that I posted, you would think that the the second hand would have a smooth movement and you would be right.  I actually had a little code that converted the two <SplineDoubleKeyFrame> elements at 00:00:00 and 00:01:00 to sixty <DiscreteDoubleKeyFrame> elements.  For key frame animations, Silverlight has three types that can be used interchangeably:

Type Description Usage
Discrete at the specific time, change the value immediately second hand movement
Linear interpolate linearly to determine the value robotic movement
Spline interpolate along a curve to determine the value natural movement

I could have definitely added the sixty key frames manually to the XAML but that would have increased the loading time and it would be much easer to do that task programmatically at runtime.  I wrote the code so that I could use it to apply to the chronograph’s second hand as well:

/// This will increment the second hand in 1 second increments
BallWatch.Page.prototype.UpdateSecondAnimation = function(animationName)
{
    var animation = this.Watch.findName(animationName);
    
    animation.KeyFrames.Clear();
    
    for (var i = 0; i <= 60; i++)
    {
        var xaml = '<DiscreteDoubleKeyFrame xmlns="http://schemas.microsoft.com/client/2007" KeyTime="00:00:00"/>';
        
        var keyFrame = this.content.createFromXaml(xaml);
        
        keyFrame.KeyTime.Seconds = i;
        keyFrame.Value = i * 6;
        
        animation.KeyFrames.Add(keyFrame);
    }
}

If you want to take a look at the source code to make your own timepiece, I just uploaded the source code to a new project on the MSDN Code Gallery.

Comments (4)

  1. Nikolay Raychev discusses the Hyperlink Control, Rob Bagby talks about Streaming, and Dave Relyea snaps

  2. After last week release of Silverlight 2 Beta 2, (SL2B2)&#160; I collected a small step-by-step guide

  3. Jagadeep says:

    Hello,

    I saw your Application it is very nice….i had downloaded it and tried to execute, i got the following errors…..

    Line: 75

    Char: 5

    Error: AG_E_RUNTIME_METHOD:CreateFromXaml

    Code:2207

    Url:http://localhost:1834/

    Line: 49

    Char: 5

    Error: Object doesn’t support this property or method

    Code:0Url:http://localhost:1834/

    Can you help me fixing these errors………..