Have you seen the Silverlight? – More Silverlight

Handling Events

This article was originally published in VSJ, which is now part of Developer Fusion.

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
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.

Animations &

You might also like...

Comments

About the author

Dave Wheeler United Kingdom

Dave Wheeler is a freelance instructor and consultant who specialises in .NET application development. He’s a moderator on Microsoft’s ASP.NET and Silverlight forums and is a regular speaker at ...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Owning a computer without programming is like having a kitchen and using only the microwave oven” - Charles Petzold