With this article, I want to start a Beginning Silverlight series in which I'll try to share with you my experience in such a great technology. I'll start with Silverlight basic principles and finish with some amazing Silverlight applications. Let's start step-by-step.
Using the Code
To use code from this article, you will need to install Visual Studio 2008 Beta 2 and Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2. After installing them, simply open the CSPROJ file and run the project.
All of these obstacles prevent companies and developers from creating really big and powerful web applications targeted for any-browser users. So, what will help us with this mess? Yeah, you are right: Silverlight will be our saver :).
So, what is Silverlight? I'll try to explain it in a few words. Silverlight is a Microsoft technology that allows you to make rich applications with nice interfaces that are executed in a browser. "And what?" you'll probably ask. Well, first of all, it's truly cross-platform and cross-browser. This means that if you write your application using Silverlight, it will run in such browsers as IE, Firefox, Opera (coming soon) and Safari. Not only that, but wherever you run your application it will look the same.
Development with Silverlight
The best way to learn something is to use it. First of all, you must download Silverlight itself. You can download Silverlight 1.1 Alpha from an official Silverlight page. Also, I recommend that you download and install Visual Studio 2008 Beta 2 and Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2. In this case, creating a Silverlight application will be as easy as creating a simple .NET application. However, if you somehow don't have the possibility of using VS 2008, it's possible to create a Silverlight application in VS 2005. Be aware that it is quite tricky, though, and against VS 2008 you won't have IntelliSense enabled for writing XAML files. I will describe the workaround of creating a Silverlight project in VS 2005 further on.
Using Visual Studio 2008 Beta 2
After installing VS 2008 Beta 2 on your machine, install Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2. This will add some project types to the New Project wizard and enable IntelliSense support for Silverlight XAML coding. Start Visual Studio and open a New Project wizard. Choose Silverlight Application under Visual C#. Enter the application name and click the OK button. After you've created a Silverlight Application project, you'll see in Solution Explorer the class library project with some files already added. We'll discuss them later. To check that everything works fine, change the content of the Page.xaml file by adding a
TextBlock element inside a
Canvas element. Your code will look like this:
<TextBlock Text="Hello SilverWorld!" />
Compile and run your project. If everything is right, you will see your first Silverlight Application. Great!
Using Visual Studio 2005
If you are not lucky enough to have VS 2008 Beta 2, or just don't want to be so lucky, then you still have a chance at developing Silverlight 1.1 applications. Start Visual Studio 2005 and create an empty Class Library application. Remove all references from the project references and remove all files from the project. Go to project properties and then to the "Build" tab. Click on the "Advanced…" button and check "Do not reference mscorlib.dll."
After you've done that, add the following files, which are situated in the Silverlight installation directory (by default: C:\Program Files\Microsoft Silverlight), to the project's references: agclr.dll, mscorlib.dll, system.dll, System.Core.dll, System.Silverlight.dll, System.Xml.Core.dll. Then add files from any blank Silverlight project: TestPage.html, TestPage.html.js, Silverlight.js, Page.xaml, Page.xaml.cs (you can take them from the Silverlight SDK or from my samples). Here is Solution Explorer after completing these actions.
Replace Page.xaml's content with the same code as in the VS 2008 section, but change the
"x:Class" property of the
Canvas element to bin/Debug/[Your Class Library Name].dll. Also remove the
InitializeComponent() method call from Page.xaml.cs. Finally, compile the library, click the right mouse button on TestPage.html and choose "View in browser." Not an easy solution, but it should work. Note that Silverlight XAML support won't work (well it will, but not correctly), but IntelliSense for .NET development works fine and that's great. The reason why it works, you'll understand afterwards by digging a little bit deeper into Silverlight.
Inside a Nutshell
To write powerful Silverlight applications, we need to understand how it works inside. Let's add the following code to our Page.xaml and Page.xaml.cs files.
<TextBlock x:Name="HelloBlock" Text="Click Me!"
public void TextBlockClicked(object sender, MouseEventArgs e)
HelloBlock.Text = "Clicked!";
Compile our Silverlight project and run it. Click on TextBlock and you'll see that the text will be changed. Now let's see how it works.
When you build a Silverlight application, the same things happen as would in a simple class library. In fact, it is a class library. However, unlike a simple class library, it has references to other versions of mscorlib and other libraries. Those libraries are also simple .NET libraries. That is why we can use Visual Studio 2005 for Silverlight development even with .NET IntelliSense support: there is no difference between compiling common .NET applications and Silverlight applications. So, after building a project, we have a .NET library with application logic and a XAML file with its UI description. Note that XAML with a code-behind .NET class is something similar to an ASP.NET page with its code-behind file.
The next thing I should point out is how a Silverlight application is loaded by the client. Look at the TestPage.html page: there you'll see references to the Silverlight.js and TestPage.html.js script files. The only element in that page is
<div> with the
CreateSilverlight() function in it. This is the place where the creation of Silverlight applications takes place. When the page loads, the browser calls the
CreateSilverlight() function, which is defined in the Default.html.js file. Let's have a look at this function:
document.body.onload = function()
var silverlightControl =
It creates a Silverlight application with specified properties of XAML file, width, height, etc. This is the place where Silerlight.js code is used. Information about parameters passed to the
Silverlight.createObjectEx() function can be found at the MSDN article Using CreateSilverlight.js and Silverlight.js. All it does is activate the browser's Silverlight ActiveX plug-in and run it with specified parameters. In this moment, "woo-hoo" takes place. Your library is loaded as a simple .NET assembly and Silverlight .NET runtime executes it. Everywhere. Yeah, this is the cross-platform .NET Framework. Microsoft placed the whole .NET Framework (of course, it has some limitations) in only 4 megabytes. That's awesome.
The processes that take place in your Silverlight application (e.g. loading, event handling) are mostly the same as in Windows Forms applications. A basic Silverlight application consists of a XAML file and a code-behind file. This behavior is similar to the ASP.NET model, where we have an ASPX file with some HTML and ASP.NET elements, as well as a code-behind file with page logic. So, everything you define in XAML you can access from code-behind programmatically.
Let's have a look at XAML basics using the previous example. The root element is
<Canvas>; it's a container for all objects in Silverlight and is itself a Silverlight object. This means that it can contain other canvas objects. A
TextBlock is a simple control that has one function: to display text. Other properties are quite easy to understand. Currently, all elements in a Silverlight application are absolutely positioned and there are no controls like the stack panel in WPF. However, it's quite possible that such controls will be introduced in future beta versions of Silverlight. Also, there are no basic controls like buttons, textboxes and others. They will, of course, be in the final 1.1 release, but for now you can look at some examples of controls that are distributed with Silverlight SDK 1.1.
When it comes around to coding your Silverlight application in .NET, then it becomes very similar to Windows Forms or ASP.NET. You have some controls on your canvas and you can assign handlers for the different events of those controls. There a 2 ways to do that. The first is similar to Windows Forms in that you can use event properties of objects that represent some element from the canvas. For example:
MyTextBlock.MouseLeftButtonDown += new MouseEventHandler(
The second way is similar to ASP.NET: you can add the attribute
MouseLeftButtonDown to the element right in the XAML file. Its value passes the name of the function, which should be called when the event will be raised. Here is how it looks:
public void clicked(MouseEventArgs e)
Some elements' properties can be accessed using object properties. Others can only be accessed using the function
GetValue() and set using the
SetValue() function. For example, an element's position can be set in the following way:
You can see that it will be really easy to learn programming with Silverlight if you are familiar with some basic principles of Windows Forms and/or ASP.NET application development.
Ok, let's do something more interesting than hello world. Let it be a simple drawing application, like Paint, where it will be possible to draw on a surface using a brush. We will implement some basic functionality such as brush size and color. Let's start with those. We'll define 3 circles of different sizes in the bottom left corner of our surface to act as brush size selectors. We'll then define 3 rectangles with different colors in the right corner, which will act as brush color selectors. Here is the XAML code.
<Canvas x:Name="Surface" Background="White" Canvas.Left="0"
Canvas.Top="0" Width="640" Height="430">
<Ellipse Canvas.Left="20" Canvas.Top="447" Width="6" Height="6"
<SolidColorBrush Color="Blue" />
<Ellipse Canvas.Left="60" Canvas.Top="445" Width="10" Height="10"
<SolidColorBrush Color="Blue" />
<Ellipse Canvas.Left="100" Canvas.Top="440" Width="20"
<SolidColorBrush Color="Blue" />
<Rectangle Canvas.Left="400" Canvas.Top="440" Width="50"
<SolidColorBrush Color="Red" />
<Rectangle Canvas.Left="460" Canvas.Top="440" Width="50"
<SolidColorBrush Color="Green" />
<Rectangle Canvas.Left="520" Canvas.Top="440" Width="50"
<SolidColorBrush Color="Blue" />
Under the root canvas first comes another
Canvas element with the
"x:Name" property equal to
Surface. This is the place where we will draw using the brush. Then in the code-behind file we will use this
Surface as an object name for accessing this canvas. Next, 3 ellipses are our circles for selecting brush size. I hope you'll understand all of their properties, but if not, just refer to Silverlight's documentation on MSDN as it's pretty clear. The one property you should look at is
MouseLeftButtonDown, which is set to
SizeSelected. This is the name of our handler for changing size.
Next, 3 rectangles are used for selecting color and their behaviour is similar to ellipses. Now look at the code-behind file, which implements all logic about changing brush color/size and drawing on the surface.
public partial class Page : Canvas
private Point _prevMovingPosition;
private Color _currentColor = Colors.Blue;
private double _currentSize = 10;
private void DrawCircle(Point position)
Ellipse ellipse = new Ellipse();
ellipse.Fill = new SolidColorBrush(_currentColor);
ellipse.Width = _currentSize;
ellipse.Height = _currentSize;
position.X - _currentSize / 2);
position.Y - _currentSize / 2);
public void Page_Loaded(object o, EventArgs e)
Surface.MouseLeftButtonDown += new MouseEventHandler(
void Page_MouseLeftButtonDown(object sender, MouseEventArgs e)
_prevMovingPosition = e.GetPosition(this);
Surface.MouseMove += new MouseEventHandler(Page_MouseMove);
Surface.MouseLeftButtonUp += new MouseEventHandler(
void Page_MouseLeftButtonUp(object sender, MouseEventArgs e)
Surface.MouseMove -= Page_MouseMove;
Surface.MouseLeftButtonUp -= Page_MouseLeftButtonUp;
void Page_MouseMove(object sender, MouseEventArgs e)
Point currentPosition = e.GetPosition(this);
Line smoothingLine = new Line();
smoothingLine.Stroke = new SolidColorBrush(_currentColor);
smoothingLine.StrokeThickness = _currentSize;
smoothingLine.X1 = _prevMovingPosition.X;
smoothingLine.Y1 = _prevMovingPosition.Y;
smoothingLine.X2 = currentPosition.X;
smoothingLine.Y2 = currentPosition.Y;
_prevMovingPosition = currentPosition;
void SizeSelected(object sender, MouseEventArgs e)
_currentSize = ((Shape)sender).Width;
void ColorSelected(object sender, MouseEventArgs e)
_currentColor = ((SolidColorBrush)((Shape)sender).Fill).Color;
DrawCircle function draws an ellipse on the surface with equal height and width. The size and color of the circle are taken from
Page_Loaded function is the handler for the
OnLoad event, which is executed when the application starts. There, we are adding a handler to
MouseLeftButtonDown occurs, a circle is drawn on the surface and handlers are created for the
MouseLeftButtonUp events. So, when you are moving your mouse with a pressed button, a circle is being drawn on the new position. Also note that a line is added connecting the old position with the new position. This is done for your curve to be smoother. The
ColorSelected methods are used to change the size and color of your brush.
Now compile and run the application. Try to draw something. Here is my result :).
If needed, this simple sample can be easily extended to real Paint (for example, different brush types, real color picker, etc). So, you can see that some nice applications can be created really fast and easily with Silverlight.
That's all for this part of Beginning Silverlight. I explained how Silverlight works inside and showed a way of creating some basic applications. In the next part, I'll describe how to create a nice game using Silverlight. We'll create custom controls and will place them in a separate Silverlight library. It will also be possible to play our game in full screen mode, as Silverlight brings us such functionality. I'll show you how to use Web Services in Silverlight applications, and believe me, it's really easy.
I hope this article was helpful for you :).