Events Tunneling and Bubbling is quite an exciting feature of WPF. Now you can control events much more easily and gracefully. So let's take a look at it!
Three-layer Buttons
<Button Name="btnTop" Width="300" Height="300"
Tag="Top "
PreviewMouseLeftButtonDown="MyRoutedEventHandler"
PreviewMouseDown="MyRoutedEventHandler"
PreviewMouseUp="MyRoutedEventHandler"
PreviewMouseLeftButtonUp="MyRoutedEventHandler"
MouseLeftButtonDown="MyRoutedEventHandler"
MouseDown="MyRoutedEventHandler"
Click="MyRoutedEventHandler"
MouseDoubleClick="MyRoutedEventHandler"
MouseUp="MyRoutedEventHandler"
MouseLeftButtonUp="MyRoutedEventHandler"
>
<Button Name="btnMiddle" Width="200" Height="100"
Tag="Middle"
PreviewMouseLeftButtonDown="MyRoutedEventHandler"
PreviewMouseDown="MyRoutedEventHandler"
PreviewMouseUp="MyRoutedEventHandler"
PreviewMouseLeftButtonUp="MyRoutedEventHandler"
MouseLeftButtonDown="MyRoutedEventHandler"
MouseDown="MyRoutedEventHandler"
Click="MyRoutedEventHandler"
MouseDoubleClick="MyRoutedEventHandler"
MouseUp="MyRoutedEventHandler"
MouseLeftButtonUp="MyRoutedEventHandler"
>
<Button Name="btnBottom" Width="150" Height="30" Background="Aqua" Content=" Click Here!"
Tag="Bottom"
PreviewMouseLeftButtonDown="MyRoutedEventHandler"
PreviewMouseDown="MyRoutedEventHandler"
PreviewMouseUp="MyRoutedEventHandler"
PreviewMouseLeftButtonUp="MyRoutedEventHandler"
MouseLeftButtonDown="MyRoutedEventHandler"
MouseDown="MyRoutedEventHandler"
Click="MyRoutedEventHandler"
MouseDoubleClick="MyRoutedEventHandler"
MouseUp="MyRoutedEventHandler"
MouseLeftButtonUp="MyRoutedEventHandler"
>
</Button>
</Button>
</Button>RoutedEventHandler
private void MyRoutedEventHandler(object sender, RoutedEventArgs e)
{
Debug.WriteLine(string.Format("\t{0:mm:ss}\t{1}\t{2}", DateTime.Now, ((Button)sender).Tag, e.RoutedEvent.Name));
}
Now you can see what happens when you click the button at the bottom.
08:00 Top PreviewMouseLeftButtonDown
08:00 Top PreviewMouseDown
08:00 Middle PreviewMouseLeftButtonDown
08:00 Middle PreviewMouseDown
08:00 Bottom PreviewMouseLeftButtonDown
08:00 Bottom PreviewMouseDown
08:00 Top PreviewMouseLeftButtonUp
08:00 Top PreviewMouseUp
08:00 Middle PreviewMouseLeftButtonUp
08:00 Middle PreviewMouseUp
08:00 Bottom PreviewMouseLeftButtonUp
08:00 Bottom PreviewMouseUp
08:00 Bottom Click
08:00 Middle Click
08:00 Top Click
Missing anything? The Mouse(LeftButton)Down/Up events do not bubble up! The button at the bottom has suppressed them apparently.
Fortunately, the suppressed events(i.e. e.Handled = true) can still be handled with the
UIElement.AddHandler method by setting handledEventsToo to true.
So I add this to my code above:
UIElement.AddHandler
public Window1()
{
InitializeComponent();
btnTop.AddHandler(Button.MouseLeftButtonDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnTop.AddHandler(Button.MouseDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnTop.AddHandler(Button.MouseUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnTop.AddHandler(Button.MouseLeftButtonUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnMiddle.AddHandler(Button.MouseLeftButtonDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnMiddle.AddHandler(Button.MouseDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnMiddle.AddHandler(Button.MouseUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnMiddle.AddHandler(Button.MouseLeftButtonUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnBottom.AddHandler(Button.MouseLeftButtonDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnBottom.AddHandler(Button.MouseDownEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnBottom.AddHandler(Button.MouseUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
btnBottom.AddHandler(Button.MouseLeftButtonUpEvent, new RoutedEventHandler(MyRoutedEventHandler), true);
}
Now see what? I caught them all!
22:49 Top PreviewMouseLeftButtonDown
22:49 Top PreviewMouseDown
22:49 Middle PreviewMouseLeftButtonDown
22:49 Middle PreviewMouseDown
22:49 Bottom PreviewMouseLeftButtonDown
22:49 Bottom PreviewMouseDown
22:49 Bottom MouseLeftButtonDown
22:49 Bottom MouseDown
22:49 Middle MouseLeftButtonDown
22:49 Middle MouseDown
22:49 Top MouseLeftButtonDown
22:49 Top MouseDown
22:49 Top PreviewMouseLeftButtonUp
22:49 Top PreviewMouseUp
22:49 Middle PreviewMouseLeftButtonUp
22:49 Middle PreviewMouseUp
22:49 Bottom PreviewMouseLeftButtonUp
22:49 Bottom PreviewMouseUp
22:49 Bottom Click
22:49 Middle Click
22:49 Top Click
22:49 Bottom MouseLeftButtonUp
22:49 Bottom MouseUp
22:49 Middle MouseLeftButtonUp
22:49 Middle MouseUp
22:49 Top MouseLeftButtonUp
22:49 Top MouseUp
What a beautiful two-round-trip! (2.5 actually.)