Getting Started with Silverlight

One of the most talked about aspects of Silverlight is its undeniable technical accomplishments. In an age of 50 megabyte downloads, Microsoft managed to squeeze large parts of WPF and a mini CLR into a tiny browser plug in, currently under 5MB. Not only that, but it runs in the three major browsers (Firefox, Safari and IE) and more amazingly on the three major operating systems, with Microsoft supporting Windows and Mac OS X and Novell Mono project providing a Linux runtime.

This article explains a little of the history behind Silverlight and what you can use it for. You will see how easy it is to get started, and then you will actually practice using a free InnerWorkings coding challenge featuring a sample app that demonstrates how to use and transform video in Silverlight.

Silver-what?

Windows Presentation Foundation Everywhere (WPF/E) was announced two years ago at the 2005 PDC (Professional Developer Conference), but kept a low profile for a long time. At Mix 07 in May however, the first 1.0 beta was released under the Silverlight name, along with (a little confusingly) a preview of the 1.1 release.

Version 1.0 has now been officially released and can display vector graphics, animations and high quality video (up to 720p, the low end of HD). You can program it using a subset of WPF XAML syntax, using JavaScript to provide interactivity.

Version 1.1 however still in technical preview stage is what got everyone excited. Much more than a minor revision, this adds a bite sized CLR to the plug in, capable of executing compiled C#, VB, Python and Ruby code. Though it is cut down, the Core CLR still provides a just in time compiler and works with the exact same assemblies as the full blown desktop CLR. If you can restrict yourself to the smaller set of classes included with Silverlight CLR, there is complete compatibility between the two, with no recompilation necessary.

How does Silverlight work?

From a user point of view, the experience is designed to be as smooth as possible. On visiting a Silverlight enabled site for the first time, a message appears inviting the user to download the plug in from the Microsoft site. The install is quick and painless, although it can require a browser restart. After that, any Silverlight content is displayed automatically and the plug in even updates itself as required.

The Silverlight SDK makes this experience easy by providing a JavaScript file that detects the plug in presence and either just displays the content or prompts the user to install. The JavaScript also provides a way to display Silverlight content without worrying about the different expectations of the supported browsers.

The actual scene is defined in XAML, an XML based format where elements and attributes correspond to .NET objects and their properties. This is the same XAML that powers WPF, just with some of the elements missing.

What's left, at least in Silverlight 1.0, is enough to draw shapes, images, text and video. Some of the flexible layout options from WPF (like the Grid, DockPanel and StackPanel) are missing, along with any kind of prebuilt UI control there are no buttons, menus, listboxes or anything. Though you can use HTML controls instead, this is a major shortcoming, and the Silverlight team have promised some of these controls for a future release of version 1.1, along with a set of panels to make layout easier.

To build an app that does more than just look pretty, you can attach event handlers to Silverlight objects and write code that manipulates the scene, starting animations, controlling video or audio playback and updating the properties of objects. Silverlight really does behave like a mini WPF, so if you are familiar with its big brother (or Windows Forms or ASP.NET for that matter), the programming model is easy to follow.

Hello, Silverlight

When you strip away the helper JavaScript files, very little is required to display Silverlight content in a browser that has the plug in installed. The snippet below uses inline XAML to reference content defined in the HTML file, but you can just as easily use a file located on your web server (or one generated dynamically by ASP.NET).

Other than the XAML script tag, the snippet contains an object tag that actually creates an instance of the Silverlight control, passing it a reference to the XAML it should use (in this case preceded by the # symbol to specify the ID of the HTML element with the content).

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/xaml" id="xamlContent">
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock Text="Hello, Silverlight!" />
</Canvas>
</script>
<object id="silverlightObj" type="application/x-silverlight" width="200" height="200">
<param name="source" value="#xamlContent" />
</object>
</body>
</html>

Displaying video with Silverlight

One of the strengths of WPF (and so Silverlight) is its composability: objects can be nested within each other easily to create composite objects. A button, for example, does not have to contain just a text label, it could contain an image as well (or a video, or a tiny interactive game, or whatever you want). While many of these uses are not, well, useful, the simplicity that composability affords helps with all sorts of more common scenarios. If you want to display an image or video inside a circle or a rounded rectangle, you do not have to set some obscure property of the image, you just pop it inside a suitably shaped container.

In the same way, Silverlight animation and transformation features can apply to video as easily as primitive shapes. This makes it easy to render video on objects that can be dragged around, or to zoom into or clip video. The key to this is the VideoBrush, which can be used to paint the interior of a shape with the output of a MediaElement. The MediaElement itself can then be hidden, leaving only the VideoBrush painted shape visible.

Try it out

Silverlight is one of those technologies where words alone can not possibly do it justice. Have a look at the tutorials at http://silverlight.net/ to find out more, or skip ahead to http://silverlight.net/showcase/ to see what can be done.

Next, download the free Silverlight challenges from InnerWorkings and get to grips with some real Silverlight projects. You will learn more about setting up Silverlight in your own apps, as well as practice using a VideoBrush to render and control video clipped and magnified according to your own specifications.

What's an InnerWorkings coding challenge?

An InnerWorkings coding challenge is a sample of code in Visual Studio that has some key pieces missing. Each challenge includes selected reference links chosen specifically to help you find out how to fill in the blanks, complete the sample app, and learn about a new technology at the same time. Once you are finished, InnerWorkings Developer automatically checks your code so you can be sure you have solved the challenge correctly and that you really understand what you have learned.

Our coding challenges are designed to take you to the heart of the technology you want to learn more about, focusing on the most important, practical features. Because everything has been set up for you, you can dive straight in and start coding.

InnerWorkings has a library of hundreds of challenges on diverse topics from ASP.NET to Windows Communication Foundation. For more information, have a look at our catalog.