Thursday, August 11, 2011

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 –





1 comment: