‫Welcome back.
‫In this video, we are going to talk about events in Zemo.
‫And there are things called rooted events or events called rooted events.
‫And there are three types of rooted events direct events, bubbling events and tunneling events.
‫We have seen a direct event already, and let's create that one again.
‫So I'm going to go ahead and create a button here, and this button will simply have a content of Click
‫Me very basic, and then it has a click event and I'm going to create a new event handler here.
‫That's pretty much it.
‫And also maybe we should create a width of 150 and a height of, let's say 100.
‫So it's a decently large button here.
‫And now this button has a click event.
‫Now a click event is a direct event.
‫So let's have a look here.
‫We can see that a new method was created for us.
‫It's a private void button click method object center routed event arx e.
‫So it needs a sender, which is the object that sends this event.
‫And this is our button itself.
‫So the object button sends this event and we could go ahead and use that button.
‫And there are three events, as I said, the root event or root that events are generally the events.
‫Then there is a direct event which is one of the root events and that's our click event.
‫We will check out in a second.
‫Then there is the bubbling event and the tunneling event.
‫So let's run this code now so you can see what a direct event is going to do.
‫And by the way, if we want to execute anything, we of course, need to add a message box here just
‫to show what's happening.
‫So something like button was clicked and maybe we add something like direct event.
‫So direct event.
‫Now let's run this again.
‫And click on the button and you see button was clicked directive and we've used that one in the last
‫video and well nothing new here.
‫Right.
‫So this button is directly called or the event of the button is directly called by the click property
‫here.
‫Now there is something called a bubbling event.
‫Let's say you don't want the event to start off as soon as the user clicks on the button, but as soon
‫as you release this to click.
‫So as soon as the button or click goes up so you can use something like mouse button or mouse up here,
‫there's something called mouse up.
‫So I'm going to create a new event handler for that.
‫Let's go here and create this new event, which is also just going to show a message box here.
‫And this one will say Mouse Button went up, was released.
‫So only once it's released, this event will be triggered.
‫This button mouse up event will be triggered.
‫So let's start that one again.
‫And click on the button with the left click.
‫Nothing happens if I do that with a right click, then suddenly something happens that has to do with
‫this being a bubbling event.
‫So Mouse Up is a bubbling event, which means that it sends this event towards the top of the hierarchy
‫within the tree.
‫So we have seen what a tree is, right?
‫We have seen the visual tree in the logical tree.
‫So in here it goes up the visual tree.
‫And as you know, the visual tree is much more than we can see in this logical tree here.
‫So it's not just the window, the grid and the button itself, but there is a lot more in between.
‫And so this button sends it all the way up to all of the different tree elements that there are.
‫Then it sends it to the grid and then it sends it to the window.
‫And if it's not handled anywhere, then nothing will happen.
‫And that's what we have just seen.
‫So if I press the mouse up or if I release the mouse button, as you can see here, I'm clicking, I'm
‫still holding.
‫And once I release, nothing happens.
‫And that has to do with the event being a bubbling event and it just being ignored, as you could see,
‫work with the right button, but it didn't work with the left button, so it was bubbling and it was
‫caught by us.
‫So how can you still handle this?
‫Because now, well, it doesn't work with the left button, but you want it to work with the left button.
‫What you can do is you can use a tunnelling event.
‫The bubbling event goes up the visual tree, the tunneling event goes down the visual tree.
‫So instead of using mouse up, I'm going to use something called preview mouse up.
‫So as you can see, there are multiple different preview events here, plenty.
‫And for example, the mouse down mouse app preview mouse right button down, right button up and so
‫forth.
‫So I'm just going to create one for.
‫Generally preview mouse up so you can see that it's working.
‫Either way, I'm going to create a new event handler for that and I'm going to go ahead and add this
‫message button in here was released and this one will be the tunneling event.
‫So that one here was the bubbling event and now we are at the tunneling event.
‫Now let's start it again.
‫And we are left click now.
‫And as you can see, Mouse Button went up actually to check.
‫I'm going to click on it, holding it and now I'm releasing and then this event is triggered.
‫Now with the left hand side is the right button as well and it works as well.
‫So what this preview does, it sends it towards the button itself or towards the or goes down the visual
‫tree.
‫So it's triggered straight away.
‫So that's pretty cool.
‫If you want to use preview mouse button up, then you're on the safe side, let's say when you want
‫to use this specific behavior.
‫But then please consider also that this is not just the case for Button.
‫This is how the WPF handles rooted events in general.
‫So be careful here and use it in the right manner.
‫Now let's just for a test purpose, go ahead and create a preview.
‫Mouse left down.
‫And create a new handler.
‫And now preview mouse.
‫Write down or actually write up.
‫So just so you see that there are different types of ways.
‫And in here, I'm going to use a new event handler as well.
‫And now I'm just going to adjust the message box accordingly.
‫So in the preview mouse left button down, I'm going to say mouse button went down, was not released.
‫This is a tunneling event.
‫That's correct.
‫And that's fine.
‫And now the other one will be actually this one is the left mouse button.
‫And this one is the right mouse button.
‫Right mouse button went up and is a tunneling event.
‫And if we go ahead, we can see there is our button.
‫If I press left, click, as you can see, it's straight away triggered once I click it, even though
‫if I keep it hold or if I hold the button, it's still triggered.
‫And now the right button is only triggered once I release it.
‫So just so you see that there are multiple different ways of handling events.
‫You can even handle an event, which is if we hover in or if we get with our mouse inside of that button.
‫But that's something that we'll handle later on.
‫So now, just as a little recap, there are three different types of rooted events that rather direct
‫rooted events, the bubbling rooted events and the tunneling rooted events, the direct ones, they
‫handle the event themselves, e.g. the click event that we have seen.
‫Then the bubbling event is sending it up the visual tree and the tunneling event is sending it down
‫to visual tree.