GeekZilla
Getting to Know 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’s Mono project providing a Linux runtime.
This article explains a little of the history behind Silverlight and what you can use it for. You’ll see how easy it is to get started, and then you’ll 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’s XAML syntax, using JavaScript to provide interactivity.
Version 1.1 however – still in technical preview stage – is what’s 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’s CLR, there is complete compatibility between the two, with no re-compilation necessary.
How does Silverlight work?
From a user’s 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’s 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’re 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). That’s it.
<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, doesn’t 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 aren’t, 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 don’t have to set some obscure property of the image, you just pop it inside a suitably shaped container.
In the same way, Silverlight’s 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’t possibly do it justice. Have a look at the tutorials at silverlight.net to find out more, or skip ahead to 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’ll 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’re finished, InnerWorkings Developer automatically checks your code so you can be sure you’ve solved the challenge correctly and that you really understand what you’ve 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 .
I'm a developer living in Dublin, Ireland and working for InnerWorkings (www.innerworkings.com), where I run the content development team and work on the code-checking engine.
