A Straightforward Approach to Silverlight Component Design : Page 3

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:

   <span class="pf"><Canvas Width="100" 
     Height="40" Canvas.Left="0" 
     Canvas.Top="0" 
     MouseEnter="Button_MouseEnter" 
     MouseLeave="Button_MouseLeave" 
     MouseLeftButtonDown="Button_ClickButton">

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 <div> tag, assigns a unique ID to it, and then adds it to the page's DOM. It creates the Silverlight ButtonNav control using the Sys.Silverlight.createObject call discussed earlier, passing in the new <div> as the container and the button's text label as a custom parameter. It also sets ButtonLoaded as the JavaScript event handler to fire when the XAML is loaded and ready. Here's the ButtonLoaded event handler code:

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

The handler retrieves the parameter value passed from Sys.Silverlight.createObject by calling sender.initParams. It then gets a reference to the TextBlock control in the XAML file (the TextBlock that displays the label named ButtonLabel) by calling sender.content.findName("ButtonLabel"). Finally, it sets the TextBlock's Text property to the passed parameter value.

You may have noticed that the mouse event handlers call findName() on the sender parameter, while the ButtonLoaded event calls findName() on the sender.content property. The difference occurs because the Silverlight control you've created is the source of the mouse events, while the control's container is the source of the Loaded event.

The Button_MouseEnter and Button_MouseLeave event handlers achieve the button rollover effect by simply toggling the visibility of a mostly transparent ellipse filled with a gradient. By default, this ellipse is hidden; the MouseEnter event handler causes it to become visible, while the Button_MouseLeave event handler causes it to become invisible.

Silverlight provides a much needed alternative to Flash. Still, each technology has strong points and weak points—and Silverlight is no exception. Silverlight has probably the smoothest integration into the browser, including Firefox, I've seen. Web application developers will find Silverlight useful for adding graphical client-side controls integrated with your page widgets. Developers wanting to create media viewing applications will also like Silverlight's advanced media playback options.

Although Notepad proved sufficient for creating everything you've seen here, I recommend you learn to work with Expression Blend when you're ready to move on from simple examples and create graphically richer Silverlight controls. As a developer, it's important to know how to edit the XAML and how the XAML works, but Expression will let you skip much of the manual coding.

Previous Page