Intersoft ClientUI Documentation
How to: Handle a Routed Event

The following examples show how bubbling and tunneling works in a routed event, and how to handle them using code.

Example

Description

Routed event introduces bubbling and tunneling routing strategy.

In bubbling routing strategy, the 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.

The following example shows how to handle the KeyDown routed event, which is a bubbling event.

Code

XAML
Copy Code
<Grid x:Name="LayoutRoot">
        <StackPanel>
            <Intersoft:UXTextBox Name="textBox1" Width="150" HorizontalAlignment="Left"/>
            <TextBlock Name="statusText" Width="200" HorizontalAlignment="Left"/>
        </StackPanel>
</Grid>
C#
Copy Code
using System.Windows;
using Intersoft.Client.Framework;
using Intersoft.Client.UI.Navigation;
using CoreInput = Intersoft.Client.Framework.Input;

namespace ClientUIApplication_Docs.RoutedEvents
{
    public partial class BubblingEvent : UXPage
    {
        public BubblingEvent()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(BubblingEvent_Loaded);
        }

        void BubblingEvent_Loaded(object sender, RoutedEventArgs e)
        {
            // Handle the KeyDown routed event in the LayoutRoot (Grid) element
            LayoutRoot.AddHandler(CoreInput.Keyboard.KeyDownEvent, new CoreInput.KeyEventHandler(OnKeyDown));
        }

        void OnKeyDown(object sender, CoreInput.KeyEventArgs e)
        {
            // This function will be invoked when you type into the textbox,
            // although the event is actually handled in LayoutRoot, not the textbox element directly.
            statusText.Text = "Invoked from a bubbling event (KeyDownEvent): " + e.Key.ToString();
        }
    }
}

Example

Description

In tunneling routing strategy, the event handlers at the element tree root are initially 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 events are also sometimes referred to as Preview events, because of a naming convention that is used for the pairs. 

The following example shows how to handle the PreviewKeyDown routed event, which is a tunneling event.

Code

XAML
Copy Code
<Grid x:Name="LayoutRoot">
        <StackPanel>
            <Intersoft:UXTextBox Name="textBox1" Width="150" HorizontalAlignment="Left"/>
            <TextBlock Name="statusText" Width="200" HorizontalAlignment="Left"/>
        </StackPanel>
</Grid>
C#
Copy Code
using System.Windows;
using Intersoft.Client.Framework;
using Intersoft.Client.UI.Navigation;
using CoreInput = Intersoft.Client.Framework.Input;

namespace ClientUIApplication_Docs.RoutedEvents
{
    public partial class BubblingEvent : UXPage
    {
        public BubblingEvent()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(BubblingEvent_Loaded);
        }

        void BubblingEvent_Loaded(object sender, RoutedEventArgs e)
        {
            // Handle the PreviewKeyDown routed event in the LayoutRoot (Grid) element
            LayoutRoot.AddHandler(CoreInput.Keyboard.PreviewKeyDownEvent, new CoreInput.KeyEventHandler(OnPreviewKeyDown));
        }

        void OnPreviewKeyDown(object sender, CoreInput.KeyEventArgs e)
        {
            // This function will be invoked when you type into the textbox,
            // although the event is actually handled in LayoutRoot, not the textbox element directly.

            // When paired with its bubbling event counterpart, the tunneling event is invoked prior 
            // to the bubbling event.
            statusText.Text = "Invoked from a tunneling event (PreviewKeyDownEvent): " + e.Key.ToString();
        }
    }
}
See Also

Concepts

Other Resources