Tip of the Day: Routed Events – Bubbling and not…

In Silverlight 2 Beta 1 some events bubble, and some do not. This can cause a bit of confusion, especially because the way this distinction is explained is itself confusing.

Bubbling

To set the stage, let's examine the following simple event handling program which is extracted from my forthcoming video on Event handling (Parts 1 and 2) that will be posted to our Silverlight 2 video page.

The example I'll be using is stripped down into a new application available here: TestRoutedEventsAndBubbling.zip

Keeping The Example Simple

To paraphrase A.E., an example should be as simple as possible, but no simpler.

This example requires a control (in this case a button) whose content is not text, but rather other controls. These concepts are covered in the first two tutorials on Silverlight 2.

We start by creating a new project and within that project a grid. The central control is a button whose Content is itself a StackPanel that contains 4 CheckBoxes

CheckBoxButton

The XAML for this is pretty straight forward and walked through in both the tutorials and the video,

ComplexButton

Notice in the XAML that we are looking at a single button that has a single content consisting of a stack panel within which are declared the four check boxes.

The question is this: when you click on the check boxes, will the button be clicked?

The answer is: it depends.  If you wire this up with a click event it will not bubble. Let's prove that.

ClickEvent

This code adds a Click Event to the button. Sure enough, if you click anywhere on the button except the check box, the button is clicked as reflected in the count in the text box, but if you click in the check box, the check box is set or cleared but the count is unaffected.

ButtonWithClickCount

Now, when I check the documentation, I'm left a bit puzzled, after all, it does say that click is a Routed Event,

ClickEventIsRouted

And it does seem to suggested that Routed Events are, well, routed…

RoutedEvent

The key is that there is routing and there is bubbling.

Now, to make this a bit more confusing, you may read an explanation that goes something like this….

"User code cannot created routed events which the Button is doing"

Eh? User code? Button?

The key thing to realize is that from the perspective of the folks who wrote the code handling routing, the Button is user code (!) just like any control you or I would write. A sharp distinction is made between the fundamental events such as MouseLeftButtonDown which is an event on Implement and which does bubble

MouseLeftDown

You can prove this to yourself by modifying your code only slightly. Comment out the click event and replace it with a MouseLeftButtonUp event handler

MouseLeftButtonUpEvent

When you run it now, it works just as before except that clicking the check box also clicks the button.

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.

2 Responses to Tip of the Day: Routed Events – Bubbling and not…

  1. Anonymous says:

    The key is that there is routing and there is bubbling.

Leave a Reply

Your email address will not be published. Required fields are marked *