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.