Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


Routed Events

Routed events are events which navigate up or down the visual tree acording to their RoutingStrategy. The routing strategy can be bubble, tunnel or direct. You can hook up event handlers on the element that raises the event or also on other elements above or below it by using the attached event syntax: Button.Click="Button_Click".

Routed events normally appear as pair. The first is a tunneling event called PreviewMouseDown and the second is the bubbling called MouseDown. They don't stop routing if the reach an event handler. To stop routing then you have to set e.Handled = true;

  • Tunneling The event is raised on the root element and navigates down to the visual tree until it reaches the source element or until the tunneling is stopped by marking the event as handeld. By naming convention it is called Preview... and appears before corresponding bubbling event.

  • Bubbling The event is raised on the source element and navigates up to the visual tree until it reaches the root element or until the bubbling is stopped by marking the event as handled. The bubbling event is raised after the tunneling event.

  • Direct The event is raised on the source element and must be handled on the source element itself. This behavior is the same as normal .NET events.

How to Create a Custom Routed Event

 
 
// Register the routed event
public static readonly RoutedEvent SelectedEvent = 
    EventManager.RegisterRoutedEvent( "Selected", RoutingStrategy.Bubble, 
    typeof(RoutedEventHandler), typeof(MyCustomControl));
 
// .NET wrapper
public event RoutedEventHandler Selected
{
    add { AddHandler(SelectedEvent, value); } 
    remove { RemoveHandler(SelectedEvent, value); }
}
 
// Raise the routed event "selected"
RaiseEvent(new RoutedEventArgs(MyCustomControl.SelectedEvent));
 
 
 




Last modified: 2010-02-08 17:52:53
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Basarat
Commented on 30.June 2010
I just needed a quick refresher and for that this was excellent. Thanks.
Basarat
Commented on 30.June 2010
I just needed a quick refresher and for that this was excellent. Thanks.
Basarat
Commented on 30.June 2010
I just needed a quick refresher and for that this was excellent. Thanks.
Basarat
Commented on 30.June 2010
I just needed a quick refresher and for that this was excellent. Thanks.
Mako
Commented on 6.July 2010
Every man and his bloody dog have written "tutorials" on this, and not ONE shows you how to do it. Bubbling goes up, tunneling goes down. We get it. SHOW US THE FLAMING CODE. What do I declare and where? If I have a main screen with a tabcontrol whose tabitems contain usercontrol forms, and I have a button on one that should switch to another tab, how could I do it?
Branko
Commented on 9.July 2010
The diagram is incorrect. Assuming we are talking about Click event on Button, then the PreviewClick (tunneling) arrow should go from Window to Button (not from Button downwards).
Dadi
Commented on 10.July 2010
I agree Branko you are correct
tb
Commented on 9.August 2010
Not to mention that there's no such thing as PreviewClick.
Mallesh
Commented on 16.August 2010
i expect explaination on code
thedirty
Commented on 23.August 2010
wow you guys are really that impressed by mosers copy and pasting
Denis
Commented on 7.September 2010
See event bubbling in a custom ASP.NET control.
http://msdn.microsoft.com/en-us/library/aa720044(v=VS.71).aspx

If you want to see the built-in action, just define the same event handler for all children of an element for MouseDown

//Window contructor
this.MouseDown += MouseDownHandler;
myBorder.MouseDown += MouseDownHandler;
myPanel.MouseDown += MouseDownHandler;
myEllipse.MouseDown += MouseDownHandler;
myRectangle.MouseDown += MouseDownHandler;

void MouseDownHandler(object sender, MouseButtonEventArgs e)
{
Debug.WriteLine("MouseDown: " + sender);
//this means that you handled the event and bubbling stops at the
// child that raised the event
//e.Handled = true;
}

Oh and can someone do something about this CommentTextBox. It's small and drives me up the wall. And the fontsize is hurting my eyes. Yes, I know I could fix it from my end, but it would be nice if i didn't have to :)
Anand Rajak
Commented on 13.September 2010
great thanks.......
sam
Commented on 16.September 2010
I don't know if i am missing something here but just to make sure, can you clarify this.

The main difference between routedevents and the old .net2.0 version of event propagation is that this version does not necessarily have to be bound to an event handler before RaiseEvent can be called?

Thanks
sam
Commented on 16.September 2010
I don't know if i am missing something here but just to make sure, can you clarify this.

The main difference between routedevents and the old .net2.0 version of event propagation is that this version does not necessarily have to be bound to an event handler before RaiseEvent can be called?

Thanks
Jothimnai V
Commented on 28.October 2010
What is the Use of the Routed Event in WPF or Silverlight. Why can't we achive the same using ordinary event
Sushil
Commented on 28.December 2010
nice description
Edward
Commented on 12.January 2011
Man, I must say your website is the best in explaining WPF concepts. MSDN sucks & all the books are just too long to read!
Akshay Bharde
Commented on 15.February 2011
Bubbling for MouseDown event doesn't work for usual controls: buttons, textbox, etc. On the other hand PreviewMouseDown works for the same. Also, bubbling for MouseDown works for container controls like Windows, StackPannel, Grid, etc. Why is it so? Pasting the XAML for your reference:


<Window x:Class="RoutedEvents.Window1" MouseDown="Window_MouseDown" PreviewMouseDown="Window_PreviewMouseDown"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel x:Name="grdNew" MouseDown="grdNew_MouseDown" PreviewMouseDown="grdNew_PreviewMouseDown" Background="Cornsilk" Height="187" Width="221">
<Button x:Name="btnNew" MouseDown="btnNew_MouseDown" PreviewMouseDown="btnNew_PreviewMouseDown" Height="84" Background="AliceBlue" MouseUp="btnNew_MouseUp">
<TextBox x:Name="txtNew" MouseDown="txtNew_MouseDown" PreviewMouseDown="txtNew_PreviewMouseDown" Width="103"></TextBox>
</Button>
</StackPanel>
</Window>
sanjay patoliaa
Commented on 26.March 2011
Nice one but should have one proper example to get clear practical understanding of all the routing strategy
Epari...
Commented on 15.April 2011
the tutorial comes handy to a new WPF programmer like me, by keeping the subject terse but well touching most of the points needed for a beginner. Hope Christian will extend the site soon for a next level [for an advanced programmer too]. Good Job. Chakkanaina article. Azagaana article.
ms
Commented on 12.May 2011
Nice one but Need more practical example to get clear understanding.
Jay
Commented on 5.June 2011
To make these tutorials, even more useful, give some downloadable simple example.
srinivas
Commented on 7.June 2011
Best for quick look at basic concepts and understanding of WPF. Covering in depth of all concepts with an example will make this site excellent
Om Prakash
Commented on 17.June 2011
really great.
Mahesh
Commented on 6.July 2011
Really Very good

Name
E-Mail (optional)
Comment