WPF  

Difference Between Bubbling And Tunneling Routing Events In WPF With An Example

Introduction 

 
Hi everyone, welcome back to a new article.
 
In the last article on bubbling events, we learned everything about bubbling events, and now you're telling me there is one more type of event: tunneling?  No worries, tunneling events are exactly the opposite of bubbling events.
  1. Bubbling is a Bottom-Up approach. (i.e. From control which fires the event to the topmost control in the live-visual tree.) For example, from button to Window/UserControl. Where tunneling is a Top-Down approach. i.e. From the topmost control to the control which fires the event. For example, from Window/UserControl to the button.
  2. How do we differentiate in XAML: every tunneling event is prefixed by the preview keyword. Bubbling: MouseDoubleClick, Tunneling: PreviewMouseDoubleClick 
This theory may be a bit confusing, but it will be clear once we understand the code execution flow. Go ahead and create a new WPF project. Here is what we are going to do:
  1. Add one label
  2. Add an Outer Button named OuterButton
  3. Add an Inner Button inside an Outer button named InnerButton.
This is how your MainWindow.xaml looks for tunneling events:
  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.         <Label x:Name="LabelDisplay" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>    
  11.         <Button x:Name="OuterButton"    
  12.                 Height="70"    
  13.                 Width="350"    
  14.                 PreviewMouseDoubleClick="OuterButton_Click">    
  15.             <Button x:Name="InnerButton"    
  16.                     Content="Inner Button"    
  17.                     Height="35"    
  18.                     Width="175"     
  19.                      PreviewMouseDoubleClick="InnerButton_Click" >    
  20.             </Button>    
  21.         </Button>    
  22.     </Grid>    
  23. </Window>     
Pretty good - Now 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.             LabelDisplay.Content += "OuterButton Cliked, ";  
  18.         }  
  19.   
  20.         private void InnerButton_Click(object sender, RoutedEventArgs e)  
  21.         {  
  22.             LabelDisplay.Content += "InnerButton Cliked";  
  23.         }  
  24.     }  
  25. } 
This is the output screen:
 
Difference Between Bubbling And Tunning Routing Events In WPF, Explained With An Example
 
Explanation
 
When the user double-clicked on the Inner button, what happens first it goes to the OuterButton_Click event, as its following Top-Down approach and OuterButton is the parent of InnerButton. After successfully executing that event, it goes to the InnerButton_Click event and executes that event.
 
Now let's see how it would look like in a bubbling event:
 
Just remove the keyword preview in 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.         <Label x:Name="LabelDisplay" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>    
  11.         <Button x:Name="OuterButton"    
  12.                 Height="70"    
  13.                 Width="350"    
  14.                 MouseDoubleClick="OuterButton_Click">    
  15.             <Button x:Name="InnerButton"    
  16.                     Content="Inner Button"    
  17.                     Height="35"    
  18.                     Width="175"     
  19.                      MouseDoubleClick="InnerButton_Click" >    
  20.             </Button>    
  21.         </Button>    
  22.     </Grid>    
  23. </Window>     
Now run the project:
 
Difference Between Bubbling And Tunning Routing Events In WPF, Explained With An Example
 
Explanation
 
Now, as we are following the bubbling event, it follows a Bottom-Up approach. So here, InnerButton_Click event comes first in the bottom so it executes that event first then it moves up in the hierarchy and found OuterButton_Click event and executes that event.
 
You can do a lot with routing events. executes multiple this at once or combine 2 events together.
 
I hope you explore WPF to its full potential.
 
If you have any queries, you can find me at:
Thank you, and Happy Coding!

Membership not found