UWP Development, Routed Event

In Universal Windows Platform (UWP) development, events play an important role. Events are essential elements that connect the user interface (UI) and user interactions. To handle events, event handlers are needed, and Routed Events describe the mechanism by which events propagate within a UWP application. In this article, we will explore the concept of Routed Events, usage examples, and various programming techniques in detail.

What is a Routed Event?

A Routed Event is a pattern for events that occur in UWP, where events can propagate from the element that raised them to its parent element or from a parent element to its child elements. This structure allows events to be handled only at desired locations, simplifying interactions between various elements in the UI tree.

Routed Events have three main propagation directions:

• Bubbling: Events propagate from child elements to parent elements. This usually occurs when UI elements are manipulated.
• Tunneling: Events travel down from parent elements to child elements. This method is useful when you want to use higher-priority event handlers.
• Direct: Events are handled directly by specific elements. This is used when performing basic event handling.

Creating a Routed Event

Routed Events can be created as custom events. Here’s how to create a Routed Event in UWP:

csharp
// Registering an event with RoutedEventManager
public static readonly RoutedEvent MyCustomEvent = EventManager.RegisterRoutedEvent(
    "MyCustom",
    RoutingStrategy.Bubbling,
    typeof(RoutedEventHandler),
    typeof(MyControl));

public event RoutedEventHandler MyCustom
{
    add { AddHandler(MyCustomEvent, value); }
    remove { RemoveHandler(MyCustomEvent, value); }
}

// Method to raise the event
protected virtual void RaiseMyCustomEvent()
{
    RoutedEventArgs args = new RoutedEventArgs(MyCustomEvent);
    RaiseEvent(args);
}

In the code above, we created a custom control called MyControl and registered a Routed Event named MyCustomEvent. Event handlers can be added and removed via the MyCustom property. Finally, the RaiseMyCustomEvent method is responsible for raising the event.

Using Routed Events

Now that we have created a custom Routed Event, it’s time to actually use it. Let’s see how we can leverage Routed Events through the example below:

csharp
// Custom control class
public sealed class MyControl : Control
{
    public MyControl()
    {
        this.DefaultStyleKey = typeof(MyControl);
        this.PointerPressed += OnPointerPressed; // Handling pointer click events
    }

    private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
    {
        RaiseMyCustomEvent(); // Raising MyCustom event
    }
}

// Using the custom control in XAML
<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>
        <local:MyControl MyCustom="MyControl_MyCustom"/>
    </StackPanel>
</Page>

// Event handler (XAML.cs)
private void MyControl_MyCustom(object sender, RoutedEventArgs e)
{
    // Handling the custom event
    Debug.WriteLine("MyCustom Routed Event occurred!");
}

In the code above, we create MyControl and raise the MyCustom event when the user clicks. It demonstrates how to connect this event in XAML for handling. When the event occurs, the MyControl_MyCustom method is called to print a message in the debug log.

Routed Events and Delegates

In UWP, Routed Events are implemented through Delegates. Routed Event handlers have specific signatures that are associated with the routed events. Here’s an example using Delegate:

csharp
public delegate void CustomEventHandler(object sender, CustomEventArgs e);
public event CustomEventHandler CustomEvent;

protected virtual void OnCustomEvent(CustomEventArgs e)
{
    CustomEvent?.Invoke(this, e); // Raise the event
}

Using Delegates like this allows for implementing complex logic and sending custom events with additional event data.

Conclusion

Routed Events are a powerful tool that enables efficient handling of user interactions with the user interface in UWP development. We examined how to raise and handle events, create custom events, and utilize Delegates. With this understanding, you can enhance the interface and user experience of your UWP applications.

Now, we hope you will leverage Routed Events to develop better UWP apps. If you have any questions, feel free to ask in the comments!