The Managed C# Code

The C# code looks like typical .NET code. It has several using statements up at the top, and it has all the usual C# goodies, such as a namespace and a class.

First, notice the namespace is called Samples.Silverlight.CS and the class is called ClockCanvas for a fully-qualified name of Samples.Silverlight.CS.ClockCanvas. Now look back at the clock.xaml file, and you'll see in the root Canvas element the following attribute:

x:Class="Samples.Silverlight.CS.ClockCanvas;
assembly=ClientBin/SLClock.dll"

There's the class name. There's also the name of an assembly containing this class. Remember, this is managed code and it will get compiled into an assembly. Microsoft already did that part for you. Inside the directory containing these files is another directory called ClientBin. That directory contains a file call SLClock.dll, which is simply this C# code compiled already for you. (Normally, of course, you'd compile the code yourself to make the assembly. But these pre-existing samples make life easy indeed!)

The class in the C# code is derived from Canvas, and as such goes together with the Canvas element in your XAML code. The class also includes a function called Canvas_Loaded. Again, look at the XAML code and you'll see this Canvas attribute:

Loaded="Canvas_Loaded"

The Canvas supports a Loaded event, which triggers when your user interface loads. This attribute means that when the Loaded event triggers, Silverlight should call your Canvas_Loaded function.

Now here's a big difference between Silverlight 1.0 and Silverlight 1.1. With 1.0, such event handlers are JavaScript code that are attached to the web page. The code runs inside the browser's JavaScript interpreter. With Silverlight 1.1, however, the code can live as managed .NET code inside an assembly, as is the case with this very clock example.

Thus, when the canvas loads, it will call into your C# code's Canvas_Loaded function.

But wait! Some of you might have noticed something disturbing about his code: The Canvas_Loaded function is not a static function. It's a member of an instance. But what instance? And when is it instantiated? Remember, this class is attached to the Canvas tag in the XAML file by nature of the x:class attribute. Thus, when Silverlight creates the canvas for the control, it also creates a new instance of this class.

The C# code itself is pretty straightforward. Notice, however, how the code interacts with the elements declared in the XAML file. First, the canvas itself is passed into the Page_Loaded method through the sender parameter. To obtain the canvas, the code casts sender to a Canvas type. (Notice the one-to-one in the typing. The Canvas element in the XAML corresponds to a Canvas type in the C# code.)

To obtain the hands, the code calls the Canvas object's FindName function. The result is cast to a Path instance. Again, the Path elements in the XAML correspond to Path types in the managed code. The same holds for the Animation elements. One by one, this code obtains references to the various elements in the XAML, casting them to their corresponding managed types.

Then the code grabs the current time and uses the time to calculate the angle for the hands on the clock. Finally, the code sets the angles for by setting the animation elements' From and To attributes. (Remember, you don't have access to the individual slices of the animation, so you can't just say, "Bump the animation ahead to such-and-such angle." Instead, you have to re-think the problem; in this case that meant reprogramming the From and To attributes. However, technically this is wrong. Check out <a href=">this blog entry</a> that I wrote for more information on why this is the wrong way to implement a clock.)

Dissecting the code and Architecture

As you just saw, the elements in the XAML correspond to types that you can use in your managed code. These types live in various assemblies used by Silverlight, all as part of a standalone, miniature .NET system.

You can see the different assemblies in the C:\Program Files\Microsoft Silverlight directory. Some of these (such as system.dll) are similar to the full versions found in the .NET library. Others (such as System.Silverlight.dll) are unique to Silverlight. Together, all these libraries make up the entire .NET runtime used by Silverlight, and they run independently of the full .NET you have installed on your computer. This means that when you create managed code for a Silverlight control you have on your web page, the people visiting your web page do not need the entire .NET runtime installed on their computer. All they need is the Silverlight control and its condensed runtime, which is a rather small download.

Yet, the runtime is packed with a good bit of namespaces and classes, some that you're probably familiar with, and others that are unique to Silverlight. In the C# code for the clock example, there are several using statements at the beginning to reference various namespaces from the runtime. Here they are:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

You can use the ildasm tool to inspect some of the assemblies in the C:\Program Files\Microsoft Silverlight directory. (This tool is by default in the directory C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin.)

For example, I saw in the System.Core.dll assembly several LINQ classes!

There's also an assembly called System.Xml.Core.dll. Opening this in ildasm shows several familiar classes from the System.Xml namespace found in the full .NET framework.

Next try looking at the System.Silverlight.dll assembly. This is where you find many classes unique to Silverlight, including a whole namespace for interacting with the browser (which is a topic I take up in the next article).

Notably missing at this time are classes for controls such as buttons and list boxes and what-not. But don't worry. This is an alpha version we're looking at. Microsoft tells us that these are coming. (Meanwhile, you can use some custom control samples provided with the Silverlight SDK, in the Tools\SilverlightControlsStarterKit directory.

What's Next

Next week we'll continue with our exploration of Silverlight as we create a new project from scratch. See you then!