Post
Ask Question

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
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="450" Width="800">    
  9.     <Grid>    
  10.         <Button x:Name="OuterButton"    
  11.                 Height="70"    
  12.                 Width="350">    
  13.             <Button x:Name="InnerButton"    
  14.                     Content="Inner Button"    
  15.                     Height="35"    
  16.                     Width="175">    
  17.             </Button>    
  18.         </Button>    
  19.     </Grid>    
  20. </Window>     
Now, run your project & see how it looks in a logical tree:
 
Routed Events - Bubbling In WPF
 
As you can see, InnerButton is a part of an OuterButton.
 
Now let's go ahead and add an Event-handler to an OuterButton.
  1. <Button x:Name="OuterButton"    
  2.                 Height="70"    
  3.                 Width="350"    
  4.                 Click="OuterButton_Click">    
MainWindow.xaml.cs
  1. using System.Windows;  
  2.   
  3. namespace A  
  4. {  
  5.     /// <summary>  
  6.     /// Interaction logic for MainWindow.xaml  
  7.     /// </summary>  
  8.     public partial class MainWindow : Window  
  9.     {  
  10.         public MainWindow()  
  11.         {  
  12.             InitializeComponent();  
  13.         }  
  14.  
  15.         private void OuterButton_Click(object sender, RoutedEventArgs e)  
  16.         {  
  17.             MessageBox.Show("You've clicked in outer button");  
  18.         }  
  19.     }  
  20. } 
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. 
Routed Events - Bubbling In WPF
 
Let's do some more experiments.
 
What if we do have an event handler for both buttons?
 
MainWindow.xaml
  1. <Button x:Name="OuterButton"    
  2.         Height="70"    
  3.         Width="350"    
  4.         Click="OuterButton_Click">    
  5.     <Button x:Name="InnerButton"    
  6.             Content="Inner Button"    
  7.             Height="35"    
  8.             Width="175" Click="InnerButton_Click">    
  9.     </Button>    
  10. </Button>     
MainWindow.xaml.cs
  1. using System.Windows;  
  2.   
  3. namespace A  
  4. {  
  5.     /// <summary>  
  6.     /// Interaction logic for MainWindow.xaml  
  7.     /// </summary>  
  8.     public partial class MainWindow : Window  
  9.     {  
  10.         public MainWindow()  
  11.         {  
  12.             InitializeComponent();  
  13.         }  
  14.   
  15.         private void OuterButton_Click(object sender, RoutedEventArgs e)  
  16.         {  
  17.             MessageBox.Show("You've clicked on a outer button");  
  18.         }  
  19.   
  20.         private void InnerButton_Click(object sender, RoutedEventArgs e)  
  21.         {  
  22.             MessageBox.Show("You've clicked on a inner button");  
  23.         }  
  24.     }  
  25. } 
Now run your project.
 
1st, click on an Outer Button.
 
Result: only 1 popup: As OuterButton has only one popup to trigger.
Routed Events - Bubbling In WPF
2nd, what if we click on an InnerButton this time?
 
Here, the 1st InnerButton's popup is shown:
Routed Events - Bubbling In WPF
For the 2nd, after clicking on the Ok button, it triggered the next routing event in the bubble which was the OuterButton's popup.
Routed Events - Bubbling In WPF
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!


Similar Articles