Ticking in Silverlight Clock + Source Code
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.
