A Straightforward Approach to Silverlight Component Design

icrosoft recently took WPF/E (which stood for Windows Presentation Foundation Everywhere) out of the labs and released it as Silverlight, a new technology that lets you run XAML-based content—including animations and interactivity—in a web browser in a manner similar to Adobe Flash or Sun’s Java. At this time Microsoft supports Silverlight on both Apple’s OS X and on Microsoft Windows XP SP2 (and later) operating systems. It also supports the most common browsers: IE 6.0+, Mozilla 1.5.0.8+, and Mozilla derivatives such as Firefox.

With the announcement, Microsoft made available two separate releases that have widely differing functionality. Silverlight 1.0 supports development using a subset of XAML and JavaScript, while Silverlight 1.1 (currently in alpha release) adds managed code support for a subset of the .NET managed code libraries.

If you have any previous XAML background, it’s important to note that a lot of the staple approaches you may be familiar with from building Windows Presentation Foundation (WPF) applications will not work in Silverlight, which uses only a subset of WPF’s capabilities. Silverlight does not support most of the WPF component primitives, such as Buttons and TextBoxes, and it supports only one layout type: the absolute positioning layout. As a result, porting an existing WPF application to Silverlight will force a total rewrite of all the UI-related code.

At present, you can choose among several options for building a Silverlight component. You can use Expression Blend or Visual Studio Orcas (both in beta as of this writing), but you don’t need such advanced tools—you can use plain old Notepad. You don’t even need a compiler to develop Silverlight controls!

This introduction includes two short examples that will show you the basics to get started with Silverlight. The first example shows the minimal amount of code necessary to get Silverlight to display an ellipse in a browser. The second example covers how to develop a simple button navigation control for a web site. Both examples require nothing but Notepad and the Silverlight end-user runtimes.

Getting Started
To use the examples included in this article, you don’t have to get the development kit. To show off how easily you can get started with Silverlight development, everything in this article was built using nothing but Notepad, the Silverlight 1.0 Beta end-user runtimes, and a pre-defined JavaScript library.

To get started, download the Silverlight 1.0 Beta, and the pre-defined JavaScript file in the sample code for this article. You do not need to install any add-ons to your web server to make Silverlight work. In fact you don’t even have to have a web server; Silverlight applications will run just by clicking a local HTML file that uses Silverlight.

Build a Basic Example
All HTML files that host Silverlight controls have a few common characteristics that you’ll need to include those in your code. First, you need to include a

In your createMySilverlightControl function, call Sys.Silverlight.createObject(), which accepts parameters that define what XAML file to use, some properties specifying where and how you want your Silverlight application to run, and any custom parameters you want to pass in to it. The Simple.html file shown above references the Simple.xaml file shown below:

   
 
Figure 1. Simple Ellipse: Here's a simple ellipse drawn by Silverlight in Firefox.
               

Together, these two XAML and HTML files provide a minimal example of a Silverlight application. This simple demo doesn't do much—but it does display the green ellipse shown in Figure 1.

The XAML code creates a 100 x 40-pixel Canvas control containing a green ellipse with a black border. It has no defined interactivity; in other words, clicking on it or mousing over it doesn't do anything. For a primer on how XAML is structured, take a look at the article Developing Lookless controls with WPF. For a list of elements supported in Silverlight—a fairly small subset of those supported in WPF—take a look at the Silverlight 1.0 reference.

Build a More Useful Example
Now that you've seen the basic steps involved in embedding a Silverlight control on a web page, here's the procedure to build a more useful navigation button control that includes a mouseover effect as shown in Figure 2.

Figure 2. ButtonNav Control: The ButtonNav control is used three times on this page. You can see a mouseover effect applied to the Silverlight button.

You can't attach JavaScript mouse events to just any element in your XAML, only to the Canvas control. Listing 1 contains the HTML (ButtonNav.html) file and Listing 2 contains the XAML (ButtonNav.xaml) file for this control. In the XAML excerpt below, MouseEnter, MouseLeave, and LeftMouseButton down events define the JavaScript handlers to handle specific mouse events:

The JavaScript handlers themselves are in the HTML file (see Listing 1) that hosts the XAML control:

   function Button_MouseEnter(sender, eventArgs)   {      sender.findName("RolloverEffect").Visibility="Visible";   }      function Button_MouseLeave(sender,eventArgs)   {      sender.findName("RolloverEffect").Visibility="Hidden";   }      function Button_ClickButton(sender,eventArgs)   {      alert('Clicked:'+ sender.findName("ButtonLabel").Text);   }

Each JavaScript event handler receives two parameters similar to their equivalents in managed code: sender is the Silverlight control that fired the event, and eventArgs is an object that provides information about the event. In the event handler's JavaScript you can reference any XAML element that has a valid x:Name attribute by calling the findName() method. After you have a reference to the XAML element, you can change any of the attributes available on the element.

The JavaScript function AddButton() shown in Listing 2 adds a button dynamically. It creates an HTML

   function ButtonLoaded(sender, eventArgs)   {      var parameters = sender.initParams;      var lbl = sender.content.findName("ButtonLabel");      lbl.Text=parameters;   }