Routed Events - Bubbling In WPF

Introduction

In WPF there are 3 types of routing events:

Bubbling Event
Direct Event
Tunnel event

Today, we will learn about bubbling events.

A bubbling event begins with the element which triggers the event. Then it travels up the visual tree to the topmost element of the visual tree. So in WPF, the topmost element either could be a window or a usercontrol.

Basically, an event bubbles up till it reached the topmost element.

Let's go ahead and create a WPF application to understand it's behavior.

Let's create a simple page with 2 buttons, one inside the other.

Mainwindow.xaml

<Window x:Class="A.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:A"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button x:Name="OuterButton"
Height="70"
Width="350">
<Button x:Name="InnerButton"
Content="Inner Button"
Height="35"
Width="175">
</Button>
</Button>
</Grid>
</Window>

Now, run your project & see how it looks in a logical tree:

As you can see, InnerButton is a part of an OuterButton.

Now let's go ahead and add an Event-handler to an OuterButton.

<Button x:Name="OuterButton"
Height="70"
Width="350"
Click="OuterButton_Click">

MainWindow.xaml.cs

using System.Windows;
namespace A
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OuterButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("You've clicked in outer button");
}
}
}

Now, run your project.

There are 2 scenarios

If you click an outer button, you get a pop-up showing the message: "You've clicked the outer button". However, if you click on an Inner button, you still get the same message box, even though we have not written any handler for the inner button.

Why is this happening?

Ladies & Gents: this is our bubbling event. As our bubble is going up from the bottom, which is from the InnerButton towards the OuterButton.

Let's do some more experiments.

What if we do have an event handler for both buttons?

MainWindow.xaml

<Button x:Name="OuterButton"
Height="70"
Width="350"
Click="OuterButton_Click">
<Button x:Name="InnerButton"
Content="Inner Button"
Height="35"
Width="175" Click="InnerButton_Click">
</Button>
</Button>

MainWindow.xaml.cs

using System.Windows;
namespace A
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OuterButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("You've clicked on a outer button");
}
private void InnerButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("You've clicked on a inner button");
}
}
}

Now run your project.

1st, click on an Outer Button.

Result: only 1 popup: As OuterButton has only one popup to trigger.

2nd, what if we click on an InnerButton this time?

Here, the 1st InnerButton's popup is shown:

For the 2nd, after clicking on the Ok button, it triggered the next routing event in the bubble which was the OuterButton's popup.

So is this the purpose, to show multiple popups?

Of course not. The Purpose is that you can do multiple things at once by keeping modularity intact.

You can perform multiple actions at once, for example, change the title of the video, make a service call, etc.

I hope this has cleared your doubts about bubble events.

If you have any questions or comments, you can connect with me @

As always, happy coding!