Silverlight Events

Working with events in Silverlight is quite similar to working with events in ASP.NET, Because the UI for a typical Silverlight-based application is defined in markup (XAML), some of the principles of connecting UI events from markup elements to a runtime code entity are similar to other Web technologies.

We could use JavaScript API for Silverlight to perform event handling for a XAML page.

Adding Silverlight Event Handlers to controls

We could add Silverlight event handlers to controls withing XAML or within the code behind.

For example, we will assign an event handler for a button click event within the XAML like below:

<Button Name="btnClickMe" Content="Click Me" Click="btnClickMe_Click"></Button>

The following code shows how to assign the same event handler to the button click event within the code behind:

btnClickMe.Click += new RoutedEventHandler(btnClickMe_Click);

Removing Silverlight Event Handlers

In some circumstances, we might want to remove event handlers. To remove event handlers, we use the –= operator like below:

btnClickMe.Click -= btnClickMe_Click;

Silverlight Event Handlers Parameters

Any handler we write for a managed Silverlight event has two parameters. The first such parameter is sender, which is a reference to the object where the handler is attached.The sender parameter is typed as the base Object type.Based on our own application design, we expect a type that is safe to cast sender to, and then we could change the sender state.

All events send some kind of event data like the position of the mouse when the mouse events is fired, these data is captured by the second parameter which is an instance of a class that inherits EventArgs (or is EventArgs itself).

Silverlight Routed Events

The routed events are "bubbling" from XAML object element children that raise the event, toward the parent object element that contains them. The event occurrence and its event data continue and are reported to objects along the event route until the root element is reached.

The events are first handled by their source and then the event handlers of the parent elements are invoked till the event reaches the root element of the visual tree.

Silverlight RoutedEventArgs OriginalSource Propert

The OriginalSource property holds the original object that raised the event, instead of where the handler is attached.Take attention that the sender property holds a reference to the object where the handler is attached.

Silverlight RoutedEventArgs Handled Propert

If you want to stop event propagation further through the visual tree, set this property to true.

Additional Resources

Silverlight Books

Silverlight Layout Controls

Layout Controls

The use of layout controls is both straight-forward and essential to the creation of Silverlight applications. Layout controls are used to manage the placement of other controls (including other layout controls!) in your Silverlight application. You can think of the layout controls as "containers."

Silverlight and WPF support a flexible layout management system that enables developers and designers to easily coordinate how controls are positioned within a UI surface. This layout system supports both a fixed position model where controls are positioned using explicit coordinates, as well as a more dynamic position model where layout and controls can be automatically sized and flowed as the browser resizes.

The three Layout controls you'll use most often are:

• Grid - essentially a table used for positioning objects in rows and columns.
• StackPanel - used to position objects next to one another, or atop one another.
• Canvas - used for absolute positioning (and unchanged from Silverlight 1.0)

They are listed in the order of how frequently they are used. And to be honest, if you learn Grid and StackPanel, you can probably program for a long time on just those two.

Grids

Grids (not to be confused with DataGrids) offer easy and exact placement by providing a table-like structure. You declare rows and columns, and then place controls into a specific row/column location (spanning across rows or columns as needed).

The Grid control is the most flexible layout panel, and supports arranging controls in multi-row and multi-column layouts. It is conceptually similar to an HTML Table element.

Unlike an HTML Table, you don't embed controls within column and row elements. Instead you specify a Grid's Row and Column definitions using and properties that are declared immediately under the control. You can then use the XAML "Attached Property" syntax on controls contained within the grid to indicate which Grid row and column they should be populated within.

While you can tweak your grids to achieve very precise placement, the basic use of grids is extremely straight forward.

For example, we could declare a Grid layout has three rows and three columns, and then position 4 buttons within it using XAML like below:

The Grid layout panel would then position the Button elements for us like so:

StackPanel

The StackPanel control is a simple layout panel that supports positioning its contained controls in either a row or column layout. StackPanels are typically used in scenarios where you want to arrange a small subsection of the UI on your page.

StackPanels are typically combined with other layout controls. They allow you to stack objects one on top of the other, or next to each other (like books on a shelf).

One convenience of a StackPanel is that you do not have to provide the position of the objects held by a StackPanel, they are positioned relative to the object declared earlier in the Stack.

For example, we could use the StackPanel to vertically arrange three buttons on our page using XAML markup like below:

At runtime the StackPanel would then automatically arrange the Button controls in a vertical stack for us like below:

Canvas Panel

The Canvas panel is a pretty basic layout panel that supports positioning controls contained within it using explicit coordinates.

You position elements in a Canvas using a XAML feature called "Attached Properties" - which allow you to specify a control's position relative to its immediate parent Canvas control's Left, Top, Right or Bottom coordinates. Attached properties are useful as they allow a parent panel to extend the property set of a control contained within it. Canvas, by defining an attached property for “Top” and ”Left” basically adds the ability to define left and top attachment on Button (or any other UI element that is added to the Canvas), without any need to actually add a property to the Button class, or modify the Button class in any way.

We could add two buttons to a Canvas container, and position them both 50 pixels from the left of the Canvas, and 50 and 150 pixels from the top using XAML like below (the Canvas.Left and Canvas.Top attributes are examples of the attached property syntax):

This would then render our buttons like below:

References:

http://www.silverlight.net/learn/tutorials/controls-cs/

http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx

Books:

Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell