Silverlight: Events

Event Model

Silverlight events bubble from the element where the event originated up through the element's parent hierarchy. This allows you to use multiple elements to create a single "control" and only hook up event handlers at the top of the control's hierarchy. For example, you may have a button that consists of the containing canvas, an image, some text, borders, and other visual treatments. Instead of having to track the click event on each of these elements, you can attach your event handler only on the top-level canvas. Even if the event originated on one of the child elements, such as the image or text, you will still receive the event on the canvas.

Event handlers are hooked up in XAML in a similar fashion as in HTML, and you code in a similar fashion to how it is done in JavaScript for DOM elements. The actual event handler function follows the .NET standard and is passed in the object that raised the event and an event arguments object. This model allows you to use the same function to handle events from multiple similar objects and also to extend the amount of information passed to an event handler without breaking backwards compatibility.

To summarize:

  • XAML: Handlers attached in element attributes
  • JavaScript: Call AddEventListener() and RemoveEventListener()
  • Event handlers: function myEventHandler(sender, eventArgs) { }

AddEventListener returns a token that must be passed to RemoveEventListener if you are hooking more than one event handler to an event.

Keyboard Events

Keyboard event support in Silverlight 1.0 is fairly limited. You can only receive keyboard events at the root Canvas object. You are also limited by the browser, as it may swallow some keyboard combinations that it uses in its UI, and for security reasons keyboard events are not available in full screen mode.

Available events are KeyDown and KeyUp. They give you the following information:

  • Cross platform key code
  • Platform specific key code
  • The state of the Shift and Ctrl keys

As the keyboard event returns a key code, not an actual character code, you may find it easier to catch the standard HTML DOM keyboard events for cases such as text input where you need to know the character, not the physical key.

The following JavaScript example hooks up the KeyUp event and displays the information available in the keyboard event handler.

View Sample

Mouse Events

Available mouse events in Silverlight 1.0 are MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, and MouseMove. The right mouse button is not available since it always brings up the Silverlight context menu. Silverlight 1.0 does not provide a means to extend this menu.

The above events, except for MouseLeave, give you the following information:

  • Mouse X and Y-coordinates using the GetPosition() method.
  • The state of the Shift and Ctrl keys.

The following stripped down JavaScript code hooks up the MouseMove event and displays the information available in the mouse event handler. View the source of the sample to see the full code.

View Sample

Further Reading

Related information on the web is listed below.