Trying out the samples

Once you have everything installed, you can try out some of the samples in the quickstarts directory. When I first looked at the quickstarts directory, I was a little alarmed: It's filled with ASP.NET. While I'm certainly proficient in ASP.NET and use it all the time, do I really need ASP.NET to use Silverlight 1.1?

The answer is no. You don't need ASP.NET. However, the two work together very well, which is why the quickstarts examples are in an ASP.NET application directory. So if you want, you can add the quickstarts to your IIS server.

To make the examples work right, call the application quickstarts and point its physical path to the quickstarts directory.

But you don't have to use ASP.NET if you don't want to. Let's have a look at one of the quickstarts examples that doesn't use ASP.NET.

The clock example

In the quickstarts directory is a subdirectory called samples. That directory contains several really good Silverlight 1.1 examples. The one we'll look at is in the quickstarts\samples\SilverlightClock\cs directory. (The cs subdirectory contains the example with C#. The other, vb, contains the same example but with VB.NET code. You can use whichever you prefer. I'll use the cs one since most DevSource readers prefer C#.)

Inside the directory are these files:

Now that Silverlight 1.1 is installed, open up your browser and point your address to the default.htm file in the quickstarts\samples\SilverlightClock\cs directory. Don't use your IIS webserver (that is, don't use http://localhost) but instead simply open the file. (Depending on your security settings, you may have to allow blocked content.)

The following figure if what I see in my browser.

Tearing apart the clock

Let's take a look at the code that makes this clock go. First, take a look at the .htm file. There's not much to it; it basically just creates the Silverlight control by calling the code in the createsilverlight.js file. So let's look at that file.

The createsilverlight.js file simply calls a function in the silverlight.js file. The function is Silverlight.createObjectEx, and the name of your XAML file is passed in, along with the width and height for the control, as well as some other parameters you're welcome to explore on your own.

Now take a look at clock.xaml. This is the XAML code that defines the user interface. I don't have enough space here to give you a full rundown of XAML, but I can provide a few quick comments about this code. The code uses XML as its basis, and as such includes a single outer element. In this case the outer element is Canvas, which provides the basic drawing surface for all your graphics. Included as child elements are several Path elements, which define the drawing of the clock.

Also in the child elements are a set of animations, found under a Canvas.Triggers element. These animations are what rotate the hands in the clock. These animations are declarative in that you don't provide algorithms and functions for manually moving the hands. Instead, you declare the steps of each animation, and how long the animation takes to complete.

For example, here's one of the animations:

<DoubleAnimation x:Name="secondAnimation"
Storyboard.TargetName="secondHandTransform" 
Storyboard.TargetProperty="Angle" From="180" To="540" Duration="0:1:0" 
RepeatBehavior="Forever" />

The first attribute is simply the name of the animation. The second attribute, TargetName, specifies which element in the XAML you are animating. (I'll look at that in a moment.) Next up is the meet of the animation. The first of these attributes specifies which property of the target element you are animating. In this case, you're animating the angle of the secondHandTransform element.

The next two properties specify the starting and ending point of the animation; the attributes are named From and To, respectively. The From value is 180 degrees. (Yup, they're starting halfway around. We'll explore why shortly.) The To value is 540. That's exactly 360 degrees past the starting point of 180 (since 180 plus 360 is 540.)

The next attribute states how long Silverlight should take to complete the animation. This might seem a little reverse if you're used to thinking in terms of algorithms. You don't specify how long or how big each step should be! You don't say, "Go one degree of 1/360th of a second.) Instead, you simply let Silverlight figure that part out. It'll decide how big each step should be and how long they should take. You just say "Take one second to complete each 360 degrees." (There's actually good reason for this: Since other processes are likely to be running, Silverlight will have freedom to decide how big to make each step so that everything will run smoothly. But don't worry, it'll be smooth.)

The final attribute, RepeatBehavior, says how long to keep the animation up. The value is set to Forever, meaning it won't quit until the page is closed.

Now let's look at the element this animation is animating:

<Path Data="M -1, 16 l 0 70 3 0 0 -70 z" Fill="red"
x:Name="SecondHand">
    <Path.RenderTransform>
        <TransformGroup>
            <RotateTransform x:Name="secondHandTransform" 
                Angle="180" /> 
            <TranslateTransform X="150.5" Y="145" /> 
        </TransformGroup>
    </Path.RenderTransform>
</Path>

The element that's being animated is actually buried down inside this Path element; it's the RotateTransform element that's being animated. The Path element draws the second hand; the RotateTransform element is a property of the drawing that specifies how to rotate the drawing. For some reason whoever created this sample decided to draw the initial second hand so it points straight down. Thus, its initial value needs to have it rotated by 180 degrees so it points straight up at the 12:00 marking. That's why the animation starts at 180.

Notice that the RotateTransform element has an Angle attribute. That's the name that was given in the animation's TargetProperty attribute.

Thus we have a clock that runs on its own without any code. So what's the accompanying C# file do? It sets the initial time of the clock.

If you'd like to see what this Silverlight animation does without the C# code, you can easily block it out. Open up the clock.xaml file and remove the Loaded="Canvas_Loaded" attribute from the root Canvas tag. (Don't remove the closing > angle bracket, though, as I accidentally did.) Save the file and refresh your browser.

The clock will still run, but it'll start at exactly 12:00.

Put the Loaded="Canvas_Loaded" attribute back in and we'll explore the C# code. That's where the real fun is.