Wahlin on .NET

Silverlight XAML Primer 8: Working with XAML Events

Get started using Silverlight's rich media capabilities.

• By Dan Wahlin
• 02/05/2008

In my previous article, I introduced how media could be embedded in a XAML canvas. By using the MediaElement tag, you can embed .WMV, .WMA and .MP3 files directly into a Silverlight application. In many cases, you'll want end users to control the media being played, which means that you need a way to handle events using event handlers. Silverlight 1.0 provides a rich event model that can be easily used and accessed, as I'll show in this article.

Getting Started with Events
Events can be defined directly on XAML elements much like defining events on HTML elements. If you need an HTML button to call a JavaScript function, you simply add an onclick attribute as below:

 <input type="button" 
 id="btnSubmit" value="Submit" 
 onclick="ButtonClick()" />

Events and their associated event handler functions can be added onto XAML elements in much the same way. Listing 1 shows an example of a Canvas element that contains Rectangle and TextBlock elements used to render a button. Looking through the code, you'll see that the Canvas defines a MouseLeftButtonDown event handler rather than a Click or OnClick event handler. Several other types of events can also be handled, such as Loaded, GotFocus, LostFocus, KeyDown, KeyUp and many others.

As the Canvas element in Listing 1 is clicked, the MouseLeftButtonDown event is fired and event data is routed to a JavaScript function named ButtonMouseClick(). Listing 2 shows the ButtonMouseClick() event handler. Notice that the signature for the event handler is similar to the one used in VB.NET or C# code. The first parameter represents the sender of the event while the second parameter contains any event data being passed as the event is raised.

The code in Listing 2 is capable of handling three different Canvas element events used to control media playing in a MediaElement. The first canvas button allows the media to be played, the second canvas button pauses it and the third canvas stops it (the complete XAML code is available with this article's downloadable code). Figure 1 shows an example of what the buttons look like once rendered in Silverlight.

When the ButtonMouseClick() event handler is called, it first determines which canvas was clicked, which it does by looking at the sender parameter's Name property. Once the name of the canvas that was clicked is determined, the code in Listing 2 locates the MediaElement element in the XAML (named mediaElement) by using the FindName() method available in Silverlight. (FindName() is similar to the document.getElementById() DOM method that you may have used in DHTML or AJAX application coding.) Once the MediaElement element is found, the appropriate method is called on it to play, pause or stop the media clip. The code also locates a TextBlock element in the XAML and shows or hides it by changing its Opacity property to 0 (hidden) or 1 (visible).

Silverlight objects expose many different types of events which allow you to tie into actions end users are performing with your application. This article has only scratched the surface of events but as the series continues you'll see events being used more and more.