This article is reproduced here with the permission of VSJ, the magazine where it was originally published. If you're a professional software developer based in the UK, you can claim a free annual subscription to VSJ.

Last month we looked at the basic structure of Silverlight and got started on building a simple media player. This month's example carries on where we left off.

First we look at events, and then move rapidly on to animation and other powerful presentation effects.

Handling Events

You can declaratively connect the object’s events to handlers by setting attributes, such as MouseEnter=“eventHandlerName” and Loaded=“loadedEventHandlerName”. You can also subscribe to events in your code, and I’ll show you this latter technique to implement the rollover effect shown in Figure 1.

Figure 1: The button rollover in action

MediaCenter.Scene.prototype =
{
	handleLoad: function(control,
		userContext, rootElement)
	{
		this.control = control;
		this.initializeComponent(
			rootElement );
	},
	initializeComponent:
		function( rootElement )
	{
		var buttons = new Array(6);
		buttons[0] =
			rootElement.findName(
			“btnPlay” );
		buttons[1] =
			rootElement.findName(
			“btnPause” );
		buttons[2] =
			rootElement.findName(
			“btnStop” );
		buttons[3] =
			rootElement.findName(
			“btnFastForward” );
		buttons[4] =
			rootElement.findName(
			“btnRewind” );
		buttons[5] =
			rootElement.findName(
			“btnLoad” );
		for( var i = 0; i < 6; i++ )
		{
			buttons[i].addEventListener(
				“MouseEnter”,
Sys.Silverlight.createDelegate(this,
				this.handleMouseEnter));
			buttons[i].addEventListener(
				“MouseLeave”,
Sys.Silverlight.createDelegate(this,
				this.handleMouseLeave));
		}
		...
	},
	handleMouseEnter:
		function(sender, eventArgs)
	{ ... },
	handleMouseLeave:
		function(sender, eventArgs)
	{ ...	},
	// rest of class elided for clarity
	...
}

As you can see, we hook up the two mouse events for each of the “buttons” in the initializeComponent() method that is called from Loaded event handler for the control. This is very reminiscent of the way that we set up events for controls in the InitializeComponent() method of a Windows Forms’ Form class, hence my naming choice for the method.

The way that we identify objects in our code is by calling the findName() method, specifying the element’s name as defined using the x:Name attribute in the XAML. This is similar to using getElementById() in standard JavaScript applications. Note that you can also call getHost() on an element to return a reference to the control itself.