Understanding WPF Bubbling and Tunneling events

+1 vote
asked Jul 7, 2013 in WPF by anonymous

I know there are different kinds of events bubbling and tunneling events in WPF. But do not know the different between each other? When the bubbling or tunneling event will be raised? Is there any benefit why we have it in WPF?


1 Answer

+1 vote
answered Jul 8, 2013 by Aadhira (1,213 points)
selected Jul 8, 2013 by administrator
Best answer

WPF Routed Event:
WPF event handling is different from regular winforms application. In classic winforms application, the events are direct events. That means, if an event is raised by any control, that event must be handled by the same control itself. But in WPF, events are routed events. So, even if the event is raised in a particular control, it is not necessary to handle on that exact target control itself, instead it can be handled in it’s any one of the parent element also.

WPF is not only has bubbling and tunneling events, it also support direct event same as winforms. At any point of time, if you think that, bubbling or tunneling is not required, then you may set the e.Handled = true. This will stop the event from rising to the parent or child base on the event type.

Routed events are also an Attached Event, so that the event can be attached in any control even it they do not have that events declared on that class. For example, Stack panel does not have “Click” event, but if the Stack panel has button inside, then the click event of the button can be handled by the Stack panel.

I will explain how both bubbling and tunneling events are working with a simple example. Events will be raised in the same order it is displayed in the result.

Tunneling Event:
These types of events will be raised by the preview events like PreviewMouseDown, PreviewMouseUp, PreviewKeyUp etc. When this event is raised, first the event will be raise on the top most parent of the control on which the event is originally raised. From there, it will traverse to the target control / element like a tunneling.

In the below example if you mouse down on the Rectangle element, first the PreviewMouseDown event will be raised in the top most parent “Window” then “Grid” the “Stack panel” finally in the target “Rectangle”

Bubbling Event:
Bubbling events are just opposite to tunneling events, which will be raised after the preview events. So, the event will be raised first in the target element and then it will be bubbling up to the top most parent. Examples of bubbling events are MouseDown, MouseUp, KeyUp etc.

In the below example if you mouse down on the Rectangle element, first the MouseDown event will be raised in the target “Rectangle” then in “Stack panel” then “Grid” the finally in “Window”

Direct Event:

In classic winforms application, always the events are direct events. But in WPF, direct event will only be used in a place where “Bubbling” or Tunneling events are not making sense.

For example, MouseEnter and MouseLeave events are routed using Direct Event. There is a property “IsMouseOver” that is associated with these event to update the status whether the mouse is over the control or not. So, whenever the mouse move over a control, Mouse enter will be raised also, it will change the “IsMouseOver” property value from “False” to “True”. Sample like that, MouseLeave event will change the property value from “False” to “True”.

Suppose if these 2 events are bubbling events, what will happen, in all the controls, “IsMouseOver” property value will be same, which will not make any sense. In these kind of situations, the events can be routed as direct.

Below is the example of bubbling and tunneling events

<Window x:Class="WpfDemo.EventsDemo"
        Title="EventsDemo" Height="215" Width="343" PreviewMouseDown="Window_PreviewMouseDown" MouseDown="Window_MouseDown">
    <Grid PreviewMouseDown="Grid_PreviewMouseDown" MouseDown="Grid_MouseDown">
        <StackPanel Height="120" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Background="Transparent" PreviewMouseDown="StackPanel_PreviewMouseDown" MouseDown="StackPanel_MouseDown">
            <Rectangle Fill="#FFF4F4F5" Height="50" Width="50" Stroke="Black" PreviewMouseDown="Rect_PreviewMouseDown" MouseDown="Rect_MouseDown" Margin="20"/>

Result after I did mouse click on Rectangle Element

Preview mouse down event on window
Preview mouse down event on grid
Preview mouse down event on stack panel
Preview mouse down event on button
Mouse down event on button
Mouse down event on stack panel
Mouse down event on grid
Mouse down event on window

Your answer


Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com