Routed Events in WPF

hey guys so in this lecture we'll understand what our routed events in WPF so just as WPF has a special type of property system called as dependency properties in WPF same we have routered events in WPF which are special kinds of events now before we continue to this lecture I I strongly recommend you to watch my lecture on visual tree and logical tree and WPF because to understand completely understand ordered events you need to have a understanding of what is a visual tree and logical trained WPF so let's quickly jump on to our slides and ascend what are routed events in WPF so as per the definition a routed event is a type of event that can invoke handlers or multiple listeners in an elementary rather than just the object that tree is the event so this definition will be more clear once we look into our demo but you need to understand that router event is also a special type of event just like dependency property is a special type of property routed event is a special kind of event also if you have a button in your window forms control you double click onto the button then a event handler for that button is generated and whenever you click on to that button you get you get the corresponding logic file which is written in the event handler of that button but with routed event you can not only invoke that button but you can also invoke the element which is containing that button so this thing will be more clear once we look into our demo so let's quickly jump on to visual studio so in order to save time I have a pre typed code with me so let me paste that code in here and loud now let me explain this code to you so first of all let me show you the code what I have done so I have a grid here it has two columns okay and then I have a button which is this button the big button okay and his name is button click me okay then I have a stack pattern inside that button and then I have a label control inside that button so this display is a label control okay it's not a content of a button it's a label of that what means it's a label that is contained inside that button okay then I have a canvas layout inside this button and then inside that canvas I have three more controls there is one ellipse which is this ellipse then I have a button which is called inner button and then I have a another ellipse which is this ellipse yellow ellipse okay then I close the canvas control I close the stack panel I close the button so it is a very simple code but you need to have a good practice for that for writing this type of codes for I recommend to you that you post on this video right now and copy this code okay so basically with a simple code a button then I have three more controls inside that button let's try to run this and let's try to see how this button looks so I have a button then I have this label here I have this ellipse here I have this yellow ellipse here I have this inner button inside this button okay let's close this and try to understand how can we implement routed events in this custom control so let's try to have a button click event associated with this outer button okay so let me go to the properties of this button and here's the properties let me click on to the events tab and then generate a click event for this button okay and let me write a simple message box in here message box dot show I am the outdoor button okay and let me try to run this application see how this looks okay now you remember this is not a single button this is not a decoration there are different controls those are contained inside this button so I have a ellipse I have two ellipses one label at one inner button let me click first this big button I am the outer button okay so this works as expected now let me try to click this ellipse here you can see I am the outer button let me try to keep this label I am the outer button same goes with inner button I am the outer button so can you imagine that how is this happening you you can say that ellipse does not have a click click event just like button so ellipse does not behave like a button okay same is with label control a label does not behave like a button but one but when I am pleating this label control it's behaving like a button that's because on click of this label there is a event that is generated and then that event finds no handler and this is handled with by this outer button okay so this is happening because of routed events so if I click this ellipse so no event is linked with ellipse ellipse does not have a click event so this button handles the click event of this ellipse okay so I am the outer button is fired so let's see what this whatever slide says so routed events have three main routing strategies one is direct event second is bubbling event second method is tunneling event now imagine a button control and you are directly double-clicking clicking on to that button and generating that click event so this is called direct event so this direct event was prevalent with window forms asp.net webforms and even it's prevalent with WPF also but what is not prevalent what was not prevalent with window forms was bubbling event end and ligament so you can understand that direct events are the normal amount so these are normal CLR events let's look into bubbling events and tunneling events so I have shown you the example of routed events so that the example what I have shown you is called as bubbling event so let's try to make this example more elaborate let's run this application one more time and you can see I am clicking anywhere and this event has been fired each and every where okay regarded the regardless of the control what I am clicking so now let's change the requirement I want this green lips to be clipped okay or message to be displayed that I am clicking this green lips so how could we do this let us go to our sam'l file and let me have this ellipse and unload onto the properties of this ellipse let me search mousedown event now mousedown event is equivalent to the click event because ellipse is not a button so let me have this mousedown event in here and let me copy this message and paste in here and I am the let me give a message that I am a green lips okay let's try to run this now you can see I am the green ellipse isn't fired but why this event is not bubbling up that's because it's not a button okay so event will bubble if this would have been a button so let me try to do this same thing with this inner button thing so let me go back to Zemel click on this inner button have a click event generated and then let me paste this message in here and say I am the inner button okay start to run this now and see the magic of routed events so this is the outer button so let me click this I am the outer button so it it behaves as expected let me click on the ellipse I am the green ellipse okay now let's try to click the inner button say I am the inner button and when I will try to click ok it says I am the outer button ok so this event has bubbled up the hierarchy bubbled up the visual tree okay let me try to show you this button is present inside this button okay so this has tracked this event has traveled from here to here okay so it has got even handler in this button so it has handled it so let me show you once again I am the inner button then I am the outer button so this click event is traveling upwards and this is called as bubbling event so let me go back to our slides so you have seen direct event and you have seen also seen as bubbling event now what is it tunneling event tunneling event is the vice versa of bubbling event so if bubbling event travels from down to up tunneling events travel from up to down now we will see the example of tunneling event later first let us try to understand that why do we actually we need bubbling events in WPF so let us go back to visual studio let's let us say that if we run this application in here I don't want to just display a message here I am the green ellipse okay I just want to do two tasks simultaneously and this could be done with the help of routed event so let me delete this message from here green ellipse okay and try to run this application one more time so now if I will click the green ellipse what will happen I will won't get a message that I have an green ellipse so it will do the work of that button okay now I if I want to do some different tasks onto this control I can do this with the help of routed event so let's try to change the title of our window okay so I will just write this not title equals green ellipse has changed the title okay let's try to run this and see how this works so I am trying to do two tasks simultaneously okay so let me try to click this green lips so first task is done I am the outer button and you can see the display in here green ellipse has changed the title okay so the title has also changed so this demo is just for illustration you can do anything means you can define anything in this routered events and do two tasks simultaneously with a one button click okay and this can only be achieved with the help of a routed events so let me close this I hope the concept and purpose of routed events is clear to you and now let's see the handling events let's move back to our slides so you can see the last point tunneling given travel down in visual tree hierarchy the difference between a bubbling and attending event is that it tunneling event will always start with a preview so if you are searching the events on in your properties windows the all the events that start from preview keyword is a tunneling event so let's move to visual studio again let me go to the zamel file so let me come to this big button and let me go to the preview events that is the tunneling events and let's select this preview most move event and let me have this message box copied in here so it say mouse moved by outer button okay same process we should repeat with the inner butter so here it is and that means copy this paste it here in a button okay let's try to run this application so here is our application running and since this is a mousemove event so the moment I will put a mouse on to that button this event will be fired so this is a very sensitive event okay so let me put a mouse over this button and you can see mouse move by outer button so this is obvious because I have put a mouse over that big button now let's come to this inner button so now event should first fire by the outer button and then it should fire by inner button because my mouse will move so mouse move by outer button and then let's press ENTER or okay you can see mouse mode by inner button so first the mouse move by outer button events fire and then mouse mode by inner button event fire so how how this is traveling this is traveling from the outer button to the inner button that is it is tunneling it is traveling from up towards down so I hope you understood the concept of tunneling and bubbling events and why do we need these routed events so I have shown you that with routed events you can perform two tasks simultaneously in our example we change the title of the window also we filed a message box from that button so if you are creating custom control and you need many controls inside that those can some control so you need to define a routing strategy to handle the events of those controls so suppose you have a button and you have two or three buttons inside those buttons so you need to take care of the events those are fired by the click of each control otherwise this is this will be very complex for you to maintain so this is the purpose of routed events in WPF so let us move back to our slides and you can see just like dependency properties we can create our custom routed events too so you have seen the predefined routered events such as Mouse down mouse up button click etcetera but you can also create your custom routed events with your custom user controls so thank you so much guys for listening if you have any doubt please leave a comment below and please do subscribe to my channel thank you so very much

Channel: DotNetSkoool

Views: 35,766

Keywords: C# Training, DotNetSkoool, WPF Training, WPF Tutorial, Routed Events, Bubbel Events, Tunnel Events

Id: vob1jheMWTE

Length: 15min 29sec (929 seconds)

Published: Wed Aug 10 2016