What are routed events in WPF?
A routed event is a type of event that, in an element, a tree has multiple listeners and that is handle by the routed events. A routed event is a basically CLR event and it is supported by an instance of the Routed Event class.
In the WPF application, they contain multiple elements some elements are declared in XAML, and some elements are declared in code, and these all elements are related to each other in a tree relationship.
Tree Structures
To identify the relationship between UI elements in a WPF application, there are two object tree structures.
### 1. Logical Tree Structure
What we are created in XAML represents the logical tree structure. You can see the below logical tree structure.
<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="RoutedEvents.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:RoutedEvents" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<stackpanel buttonbase.click="TreeStructure_Click">
<label content="Sign in Page" fontsize="20" fontstyle="Normal" horizontalalignment="Center" margin="10" verticalalignment="Top">
<stackpanel>
<textblock fontsize="15" horizontalalignment="Center" margin="5" text="Entre Email id" x:name="textblock1">
<textblock fontsize="15" horizontalalignment="Center" margin="5" text="Enter Password" x:name="textblock2">
</textblock></textblock></stackpanel><button click="btnclick_Click" content="Sign in" margin="10" width="60" x:name="btnclick"></button></label></stackpanel></grid></window>
2. Visual Tree Structure
Visual tree structure represents the structure of a visual object by the Visual Base Class. Visual tree structures are used to render the visual layouts and objects. In the routed events mostly, visual tree structures are used instead of a logical tree structure. You can see the visual tree structure of your project when you compile and run your program.
There have three routing strategies which are as follows.
- Direct Event
- Bubbling Event
- Tunnel Event
Direct Event
This event is raised by the element in which the event is organized. A standard CLR event can be used in Event Setters and Event Triggers within the style of your custom control. MouseEnter event is the best example of a direct event.
Bubbling Event
A bubbling event starts with the element where an event is organized and it can travel up the visual tree to the topmost element in the visual tree.
Tunnel Event
Tunnel events can invoke the root element tree and travel down the visual tree to all the children nodes.
Let’s see the simple route example.
MainWindow.xaml
<window buttonbase.click="Window_Click" height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="RoutedEvents.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<stackpanel buttonbase.click="StackPanel_Click" margin="20">
<stackpanel margin="10">
<textblock fontsize="18" margin="5" name="textblock1" text="This is a first TextBlock">
<textblock fontsize="18" margin="5" name="textblock2" text="This is a second TextBlock">
<textblock fontsize="18" margin="5" name="textblock3" text="This is a third TextBlock">
</textblock></textblock></textblock></stackpanel><button click="Button_Click" content="Click Me!!" margin="10" width="80"></button></stackpanel></grid></window>
In this example, we can add click event of a window, stackpanel, and button we can change the text of text block when a button is clicked.
Read More: What Is Treeview In Wpf?
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace RoutedEvents
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
textblock1.Text = "Button is Clicked";
}
private void StackPanel_Click(object sender, RoutedEventArgs e)
{
textblock2.Text = "Click event of StackPanel";
}
private void Window_Click(object sender, RoutedEventArgs e)
{
textblock3.Text = "Click event of Window";
}
}
}
Output
Image: Before clicking the button
Image: After clicking the button event
In WPF, you can stop the routed event at any particular level. For stopping routed events you need to set e.Handled = true;
private void StackPanel_Click(object sender, RoutedEventArgs e)
{
textblock2.Text = "Click event of StackPanel";
e.Handled = true;
}
Image: Example of stopping routed events
En you set e.Handler = true on specific control then this can be stopped all routing events after coming up that control.
Custom Routed Events
Below is the step to define custom routed events.
- First, you need to declare and register your event with the help of RegisterRoutedEvent.
- Three types of Routing strategy to specify the routing strategy (Direct, Tunnel, and Bubble).
- Event handler provides.
Now, we can create an example of custom routed events.
Step: 1
Open Visual Studio and select the WPF project.
Image: Create a WPF project
Step: 2
When your project is created, right-click solution explorer and select Add -> New Item -> Custom Control (WPF) and give the name.
When you click to Add button, you will see that two files are added one is a .cs file and the second is a Generic.xaml file.
Step: 3
Open Generic.xaml file and create a style for custom control.
Generic.xaml
Wants to Talk with Our Highly Skilled WPF Developer? Contact Now.
Step: 4
In MyCustomControl class, we can create a click of a custom routed event for the custom control.
MyCustomControl.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace RoutedEvents
{
public class MyCustomControl : Control
{
static MyCustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new FrameworkPropertyMetadata(typeof(MyCustomControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var button = GetTemplateChild("PART_Button") as Button;
if (button != null)
button.Click += Button_Click;
}
void Button_Click(object sender, RoutedEventArgs e)
{
RaiseClickEvent();
}
public static readonly RoutedEvent ClickEvent =
EventManager.RegisterRoutedEvent("Click", RoutingStrategy.Bubble,
typeof(RoutedEventHandler), typeof(MyCustomControl));
public event RoutedEventHandler Click
{
add { AddHandler(ClickEvent, value); }
remove { RemoveHandler(ClickEvent, value); }
}
protected virtual void RaiseClickEvent()
{
RoutedEventArgs args = new RoutedEventArgs(MyCustomControl.ClickEvent);
RaiseEvent(args);
}
}
}
Now, we just need to add a message box when the user clicks the button.
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MyCustomControl_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Custom Routed Event of Custom Control!!");
}
}
MainWindow.xaml
Image: Before clicking a button0
Image: A custom routed event of custom control
Conclusion
In this blog, we have learned about the basic concepts of routing events. Hence, you can also create your own routed events on your custom class with some support like specialization event data classes and delegates.
Top comments (0)