To use 1.1, you need Visual Studio 2008 Beta 2 Standard or Pro (NOT Express), the , and the Silverlight 1.1 SDK.
The best place to get started is at Microsoft’s Silverlight page, in the Getting Started section (imagine that). They start out with a simple clock for the first example.
Each hand is a XAML
Paths which is rotated with a simple repeating animation. I copy the
SecondHand object to create a
msHand and edit its shape. The example uses inline path markup syntax, something I hadn’t come across yet.
Data attribute here defines a path that starts (
(-1.5, 16) (in the Silverlight canvas, (0, 0) is in the top-left), and moves (
l) down by
(0, 70), then left
(3, 0), then up
(0, -70), and finally closes (
z). That’s the second hand. I want the millisecond hand to be thinner, longer, and darker.
Each path also contains a
Path.RenderTransform element which defines its angle, and is needed for the path to rotate. Now to animate it.
This is the second-hand animation, which just changes the object’s angle from 180 to 540 over 1 minute and repeats forever. Adapting it to the millisecond hand is simple:
The only differences are the target and the duration. The final step is the set up the initial condition. The path definitions create all hands pointing down, towards 6, but we want them to represent the current time. This is where the C# codebehind comes in. But first, how do we get to the code-behind? Well, in version 1.0 the
Canvas (root) of the XAML file had a
x:Class tells Silverlight that we’re using the
ClockCanvas class in
Canvas_Loaded method contains C# code to find the canvas (
Canvas can = sender as Canvas), find the animations (
DoubleAnimation secAnim = (DoubleAnimation)can.FindName("secondAnimation")), calculate the current time, and move the hands into position:
From properties of the animation object correspond to the respective attributes in the XAML. Adding 180 is done so the “default” is up instead of down (if
date.Second is 0, the angle would be 0 and the hand would point down because of the
Path definition, but we want it to point up). Duplicate this code for the new millisecond hand and replace
.Millisecond, and we’re done. We now have a 4-hand clock.