Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You can define a routed EventHandler in any element in the Element tree. When an event fires, it starts on the original element and traverses the element tree looking for EventHandlers. Each handler encountered on the way to the root element is called in sequence. I am going to demonstrate that by using a project called EventBubbling. I am going to start by using this file, WatchTheBubbling. I will double-click on this file and show you my UI. I have a dice prototype here that is composed of a number of children elements.
For instance, there is a Rectangle, the name of the rectangle is called diceBody. That is a child of a canvas and the canvas is called diceCanvas. There are also some ellipses and each one of these ellipses is called pip 1, pip 2 and so on. So the ellipse is a child of the canvas and the rectangle is the child of the canvas. Let's switch to the code view. Over here I wired up the MouseLeftButtonDown EventHandler to the root element which is my user control and then also to my diceCanvas, my diceBody and all of the pips.
What this allows me to do is watch the events as they bubble up the tree. I need to go to App.xaml.cs and change my startup root. I am going to uncomment line 26; Ctrl+K, Ctrl+U. We need to press F5 to run the application, I will click on this center pip and you see that I had the Sender pip sent an event and so did the diceCanvas. Now I am going to click on the Rectangle and you see that the diceBody fired an event and so did the dice canvas.
So they are both firing the event. While I am in this window, I might as well change to my next demo. So I am going to comment out this line and uncomment Line 27. Now I am going to move to this BubbleToRoot. This is the same dice UI I showed you in the last one, look at the events and the code behind. What I am doing here is I am going to get the diceCanvas and I am setting up a MouseLeftButtonDown handler and they are not setting up any handlers for any of the children.
Then inside this MouseLeftButtonDown handler, I am going to use the MouseButtonEventArgs to get some information about the original sender. I am doing that here on line 30. I declare a variable called original and I get the original source from the EventArg and I cast it to a FrameworkElement. Once I've done that, I can then call original.Name to get the name of the original element. I'm also going to output the sender. The sender is the root element that I am clicking on.
Let's watch this one and press F5. I will click on the center pip and you are going to see that it says the sender was the canvas, that's the parent, and the Original node was pip 3. Now I am going to click on this pip and you see it again, it's the original, this pip 1, and the sender is the canvas. Want to guess what's going to happen when I click on the rectangle? The sender is still the canvas, but now the original is the rectangle, which is called diceBody.
For my third demo, I am going to show you how you can suppress the event. As it's bubbling up the tree, any handler can say stop here, don't let it go any higher than this level. I'll switch to SuppressingEvents, switch to the code behind, and in here, I've set up a number of Event Handlers; one at the LayoutRoot level; each one of the pips have one; and so does the Body and the Canvas. On my UI, I have a checkbox down here that says Stop Bubbling at diceCanvas.
So my code is checking whether that's checked or not. So at the canvas level, when the canvas event fires, I check to see if the checkbox is checked and here's where I stop the bubbling. By setting e.Handled = true, it will never get to the root element of this user control. Let's try this. Go to App.xaml.cs and change my startup, press F5, click on this center pip, there are three events firing; Canvas, Grid level, and Pips. And then I am going to click on stop the bubbling at the canvas and I will click on the same pip again and this time, you see that it didn't make it up to the grid.
It only made it to the canvas, it was stopped at the canvas level. But I have shown you is that event bubbling allows you to capture events in a simple way at the parent level.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98414 Viewers
61 Video lessons · 85697 Viewers
71 Video lessons · 69624 Viewers
56 Video lessons · 101948 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.