Routed Events in WPF

WPF introduced new type of event called Routed Event. Routed events are designed to work inside trees of elements. Routed Events are used to navigate top or bottom through the Visual Tree based on navigation strategy. Check out my post on Logical Tree vs. Visual Tree and WPF class hierarchy to get idea about WPF control tree.

<Window x:Class="WpfApplication1.RoutedEventDemo"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="RoutedEvents in WPF" Height="300" Width="300">

<Grid>

    <StackPanel>

        <Button Content="Click Me!" Height="35" Width="150"

                Margin="5" Click="Button_Click" />

    </StackPanel>

</Grid>

</Window>

private void Button_Click(object sender, RoutedEventArgs e)

{

}

Routed event handler provides two parameters one is object sender and another is RoutedEventArgs object. Let’s have a look on below table for more details.

Routing Strategies:

Bubbling

Event is raised from bottom control (leaf element) and navigates to top control (root element) called as bubbling event. Event bubbling can be stopped in between by setting e.handed = true (called as event handled). Bubbling events are written like normal event without prefix for e.g. MouseDown, MouseUp, MouseDoubleClick etc. Bubbling events are raised after Tunneling events.

Tunneling

Tunneling events are opposite to Bubbling events. Event is raised from top control (root element) and navigates to bottom control (leaf element). Event tunneling can be stopped in between by setting e.handed = true (called as event handled). Tunneling events are written with ‘Preview’ prefix for e.g. PreviewMouseDown, PreviewMouseUp, PreviewMouseDoubleClick etc. Tunneling events are raised before bubbling events.

Direct

Direct event is raised from the source element and must be handed on the source element. This is similar to normal CLR events.

How to create custom routed event?

The following example shows how to create and raise custom routed event.

XAML

<StackPanel>

    <Button Content="Click Me!" Height="35" Width="150"

            Margin="5" Click="Button_Click" />

</StackPanel>

Code behind

//Registering the routed event

public static readonly RoutedEvent PopupOpenedEvent = EventManager.RegisterRoutedEvent("PopupOpened", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(RoutedEventDemo));

//Wrapper for Routed event

public event RoutedEventHandler PopupOpened

{

    add

    {

        AddHandler(PopupOpenedEvent, value);

    }

    remove

    {

        RemoveHandler(PopupOpenedEvent, value);

    }

}

//Raise the routed event from button click

private void Button_Click(object sender, RoutedEventArgs e)

{

    RaiseEvent(new RoutedEventArgs(RoutedEventDemo.PopupOpenedEvent));

}

//Subscribe routed event

this.PopupOpened += new RoutedEventHandler(RoutedEventDemo_PopupOpened);

void RoutedEventDemo_PopupOpened(object sender, RoutedEventArgs e)

{

    MessageBox.Show("PopupOpened routed event has been raised");

}

See also –

Logical vs. Visual Tree

WPF Class Hierarchy

WPF Architecture

Dependency Property