imageOne of the fun Silverlight 1 applications that I built over the past year was Ball Watch's Trainmaster Cannonball (http://xmldocs.net/ball).  After seeing an ad in Wired magazine, I contacted the manufacturer with an idea and was sent a 2.93 MB TIF image of this watch.  In about 8 hours using Expression Blend, I created this watch and put it online (see blog post).  Yesterday I wanted to see how long it would take to convert it to Silverlight 2 (Beta 2).  The answer - about an hour. 

Original Image 2.93 MB
Silverlight XAML 231 KB
Silverlight 1 Zip Download 59 KB
Silverlight 2 XAP 75 KB

I only had to make minor changes to the XAML and transforming the object-oriented JavaScript code to C# was very easy; the C# code was actually much clearer.  One of the "beautiful" aspects of the JavaScript code was how the watch ran.  The basics of the watch mechanism was was an Storyboard that repeats forever with three rotation animations each with a different period (1 minute, 60 minutes, and 12 hours).  Here's the code in JavaScript:

BallWatch.Page.prototype.Run = function()
{
    var run = this.content.Root.findName("Run");
    
    var time = new Date();
    var timeString = time.toTimeString();
    var index = timeString.search(" ");
    timeString = timeString.substr(0, index);
    run.Begin();
    run.Seek(timeString);
    
    var date = time.getDate();
    
    var dateNumber = this.content.findName("DateNumber");
    
    dateNumber.Text = time.getDate().toString();
}

and here's the equivalent code in C#:

private void RunWatch()
{
    var time = DateTime.Now;

    Run.Begin();

    Run.Seek(new TimeSpan(time.Hour, time.Minute, time.Second));

    DateNumber.Text = time.Day.ToString(System.Globalization.CultureInfo.CurrentCulture);
}

I have uploaded the source code to the same MSDN Code Zone project so you can look at what makes it "tick."  You can also just look at the watch (press the buttons and icons) here: http://xmldocs.net/ball2/

If you want to put the Silverlight 2 app on your blog or website, you can easily use this HTML code (feel free to adjust the iframe's width and height - it will always scale correctly):

 <iframe width="250" height="250" src="http://xmldocs.net/ball2" frameborder="0"  scrolling="no" >
</iframe>

I'd like to know if anyone has bought a Ball watch because they learned about it here from this Silverlight app - no I don't get a commission.