So you want fancy, sexy streaming media in the UI? And you want cool animations, fancy glow-in-the-dark buttons and decent, scalable vector graphics? And you want to run your application in a browser on both Windows and Mac OSX? If you’re already reaching for your copy of How to Wow with Flash, stop. There’s a new kid muscling onto the somewhat crowded Rich Interactive Application (RIA) block, and it’s coming from Microsoft.

Formerly known as WPF/E, Silverlight has been garnering some serious attention since it was first announced way back at the PDC in 2005. In this article, I’ll take you on a guided tour of Silverlight 1.0, introducing both the technology behind it and how it fits into both the .NET and RIA application landscapes. Specifically, I’ll highlight some of Silverlight’s capabilities as we look at building a simple media player, as shown in Figure 1.

Figure 1: The MediaCenter application

So what is Silverlight?

At its simplest, Silverlight is a plug-in that renders XAML-based user interfaces within a browser. Specifically, it supports modern incarnations of Internet Explorer 6+, Firefox 1.5+ & 2 and Safari 2 on the latest Windows (XP, Server 2003 and Vista) and Mac OS X platforms. Freely downloadable from Microsoft, the plug-in weighs in at a few megabytes, but it does contain some neat features, including the ability to update itself automatically and, more importantly, support for playing different media formats (VC-1, WMA and MP3) without requiring either the .NET Framework or Windows Media Player to be present on the client.

There is, however, much more to Silverlight than just a simple browser plug-in for playing some media files. For example, Microsoft is currently working on a new service, snappily entitled “Microsoft Silverlight Streaming by Windows Live”, which provides an online home for Silverlight applications and their corresponding media content for those who don’t want to set up their own media-streaming facilities.

Silverlight architecture

Figure 2 provides a very high level overview of the architecture of a basic Silverlight application.

Figure 2: Silverlight 1.0 architecture

The core concept behind Silverlight is that you create a scene, typically in XAML, that represents the user interface that is hosted by the plug-in. Elements in the scene will raise events, either as a result of user interaction or when specific conditions occur such as a video finishing playing. Much as for Windows Forms or ASP.NET, you handle these events with code; and in the case of Silverlight 1.0 that is client-side JavaScript code.

Let’s take a quick look at some of the features of this architecture.