Understand Bubbling and Tunnelling in 5 minutes

Here's a quick and visual way to understand Routed Events and their bubbling and tunnelling nature.

• 1. Download and run Snoop. It is a fantastic utility for debugging WPF applications.
• 2. Run a WPF application, and Snoop it using Snoop's binoculars button. I'm using Expression Blend in this example.
• 3. Snoop can display the visual tree of your application at run time. Move your cursor over a visual element in your application and hold down the Shift and Control keys. The element will now have a red border and Snoop will pop up the Visual Tree for your application with the element selected like this:

• 4. Click on the Events tab at the top of the right hand pane. This tab contains a list which records all routed events that hit the selected element.
• 5. Open the combo box at the top of the right hand pane. Here you can check the Routed Events that you are interested here.

• 6. In the list, uncheck everything except MouseDown and PreviewMouseDown. These are the routed events that we will look at.
• 7. Clear the list of recorded routed events by clicking the X button to the right of the combo box at the top of the right hand pane.
• 8. Go back to the selected element in your app and click on it. Notice that this will have been recorded in Snoop. If an entry is shown in green, then it has been handled.

• 9. Now expand the PreviewMouseDown entry in the right hand pane and look at the list the elements which are shown. It will be something like this:

• 10. Here's the interesting bit. Click down the list one-by-one starting at the top. As you do this, notice that the selection in the Visual Tree in the left hand pane starts at the top and moves downwards. This is because PreviewMouseDown is a Tunnelling routed event, that is, it is first received by the top-most parent element and then goes down the visual tree one by one until it reaches the bottom element. If any of the elements handle the event and set e.Handled = true then the event stops being routed there.
• 11. Now expand the MouseDown entry and look at the list of elements shown.

• 12. Since MouseDown is a Bubbling routed event, it is first received by the bottom element and then bubbles up the visual tree one by one until it reaches the top element. If any of the elements handle the event and set e.Handled = true then the event stops being routed there.

So there you have it, Snoop is a great tool for debugging WPF applications and an easy way to observe and unserstand what is going with your routed events.

For more detailed information about the motivation for the design of routed events, visit the MSDN page for routed events here.