Silverlight – Routed Event

The routed event was first introduced in WPF. It allows us to handle the event through a tree of elements in WPF application. The routed event can be understood as functional or implementation definition.
– Functional definition: A routed event is a type of event that can invoke handlers on multiple listeners in an element tree, rather than just on the object that raised the event.
– Implementation definition: A routed event is a CLR event that is backed by an instance of the RoutedEvent class and is processed by the Windows Presentation Foundation (WPF) event system.
A typical WPF application contains many elements. Whether created in code or declared in XAML, these elements exist in an element tree relationship to each other. The event route can travel in one of two directions depending on the event definition.

Below are tree types of routing strategies:
– Bubbling: Event handlers on the event source are invoked. The routed event then routes to successive parent elements until reaching the element tree root. Most routed events use the bubbling routing strategy. Bubbling routed events are generally used to report input or state changes from distinct controls or other UI elements.
– Direct: Only the source element itself is given the opportunity to invoke handlers in response. This is analogous to the “routing” that Windows Forms uses for events. However, unlike a standard CLR event, direct routed events support class handling and can be used by EventSetter and EventTrigger.
– Tunneling: Initially, event handlers at the element tree root are invoked. The routed event then travels a route through successive child elements along the route, towards the node element that is the routed event source (the element that raised the routed event). Tunneling routed events are often used or handled as part of the compositing for a control, such that events from composite parts can be deliberately suppressed or replaced by events that are specific to the complete control. Input events provided in WPF often come implemented as a tunneling/bubbling pair. Tunneling events are also sometimes referred to as Preview events, because of a naming convention that is used for the pairs.

For more details on routed event in WPF you can read here http://msdn.microsoft.com/en-us/library/ms742806.aspx
In Silverlight the routed events are limited, it only supports bubbling strategy. To demonstrate how this bubbling feature work, then follow the example below. In this example we define a user control which contains a Grid –> StackPanel –> two TextBlock.

<UserControl x:Class="SVL_Routed_Event.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="127" Width="346" Background="#FFE21111" x:Name="TopControl">
  <Grid x:Name="LayoutRoot" Background="#FFF00909">
  	<StackPanel x:Name="spPanel" Margin="8,8,8,9" Background="#FFBF5E1C">
  		<TextBlock x:Name="tbText" Height="25" Text="TextBlock" TextWrapping="Wrap" Foreground="Black"/>
  		<TextBlock x:Name="tbInfo" Height="25" Text="TextBlock" TextWrapping="Wrap"/>
  	</StackPanel>

  </Grid>
</UserControl>

In code behind, add some code lines to handle mouse down event

public MainPage()
{
	InitializeComponent();

	LayoutRoot.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(ShowInfo);
	spPanel.MouseLeftButtonDown += new MouseButtonEventHandler(ShowInfo);
	tbText.MouseLeftButtonDown += new MouseButtonEventHandler(ShowInfo);
	MouseLeftButtonDown += new MouseButtonEventHandler(ShowInfo);
}

private void ShowInfo(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
	// TODO: Add event handler implementation here.
	var vInfo = String.Format("Original: {0} - Actual: {1}\n",
		((FrameworkElement)e.OriginalSource).Name, ((FrameworkElement)sender).Name);
	tbInfo.Text = vInfo.ToString();
}

When we compile the code above, we’ll notice that mouse down event will “bubble” from the clicked component to the top control, even our user control. The complete source code you can download here “SVL Routed Event”

2 thoughts on “Silverlight – Routed Event”

Leave a Reply

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