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.|
contains the HTML (ButtonNav.html
) file and Listing 2
contains the XAML (ButtonNav.xaml
) file for this control. In the XAML excerpt below, MouseEnter
, and LeftMouseButton
<span class="pf"><Canvas Width="100"
) that hosts the XAML control:
function Button_MouseEnter(sender, eventArgs)
is the Silverlight control that fired the event, and eventArgs
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.
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
event handler code:
function ButtonLoaded(sender, eventArgs)
var parameters = sender.initParams;
var lbl = sender.content.findName("ButtonLabel");
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 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.