WPF Routed Events Exposed

What are Routed events? A question that always routed in my mind. The concept is such simple and beautiful. Lets take it with an example from mother nature. Suppose a mother bird comes to the nest with food for her children. One way is she put the food in the nest and the birdlings eat with there own beaks. Other way is the mother feeds each and every child from her own beak. Both methods work, but the later one is more natural, beautiful, efficient and secure.

Similar to routed events in WPF, its very simple. Say there are three buttons in a Grid. Each having its own click event. What that does is it adds some extra code to the code behind for method declarations. What if there is only one function that handles all the click events of buttons on the page. How it works is as below:

//A Common void method to handle all clicks

private void Window_Click(object sender, RoutedEventArgs e)
{
FrameworkElement elem = e.Source as Button;

    MessageBox.Show((elem as Button).Content.ToString());
}

The Xaml would be like this

<Window x:Class=”TestingRoutedEvents.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
Title=”MainWindow” Height=”350″ Width=”525″>
<Grid>
<StackPanel>
<StackPanel ButtonBase.Click=”Window_Click”>
<TextBox x:Name=”Hello” Text=”Hello World”/>
<TextBox/>
<Button Content=”btnok”/>
<Button Content=”btnCancel”/>
<Button Content=”btnExit”/>
</StackPanel>
<StackPanel>
<TextBox/>
<TextBox/>
<Button Content=”btnok1″/>
<Button Content=”btnCancel1″/>
<Button Content=”btnExit1″/>
</StackPanel>
</StackPanel>
</Grid>
</Window>

In Xaml code above, ButtonBase.Click=”Window_Click” does the trick, the routed events use two type of routines to fire, one is bubble-up apprach and other is Tunnel-down approach. A window click event is a bubble up event. So lets say, user clicks on btnok, this event will bubble up the visual tree and see if there is a implementation of routed event ButtonBase.Click=”Window_Click”, if it finds one, if fires that. The above code will not fire for btnok1, as in its visual tree, its direct parent is Stack Panel and StackPanel’s parent is a Window. So if we want that all the buttons should get the routed event, then either we should add ButtonBase.Click=”Window_Click” to both Stack Panels, or only on windows implementation like this;

 <Window x:Class=”TestingRoutedEvents.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
Title=”MainWindow” Height=”350″ Width=”525″ ButtonBase.Click=”Window_Click”>
<Grid>
<StackPanel>
<StackPanel>
<TextBox x:Name=”Hello” Text=”Hello World”/>
<TextBox/>
<Button Content=”btnok”/>
<Button Content=”btnCancel”/>
<Button Content=”btnExit”/>
</StackPanel>
<StackPanel>
<TextBox/>
<TextBox/>
<Button Content=”btnok1″/>
<Button Content=”btnCancel1″/>
<Button Content=”btnExit1″/>
</StackPanel>
</StackPanel>
</Grid>
</Window>

The myth of routed events i hope is now resolved.