Routed Event in WPF – Introduction

Till date we were acquainted with normal event which are basics of Win Form Applications.WPF introduces a new concept called as Routed Event .So here we will have a brief intro for this new feature and comparison between CLR Events and Routed Events.We will not start with definition , instead we will go back to old methods of CLR event and try to achieve something funny but logically meaningful.

Track Mouse Challenge (My niece 6 yrs old was tester , Still i failed  )

So a very simple logic , Whenever the mouse moves with in the panel the Status Label should display as “With in Panel” or else “Outside Panel”.So what we need to do is ,track it with Mouse Move and Mouse Leave events .The logic and code follows as bellow.

Code Snippet

1. private void pnlContainer_MouseMove(object sender, MouseEventArgs e)
2. {
3. pnlContainer.BackColor = Color.Red;
4. lblMouseLocation.Text= “With in Panel”;
5. }
6. private void pnlContainer_MouseLeave(object sender, EventArgs e)
7. {
8. pnlContainer.BackColor = Color.Cyan;
9. lblMouseLocation.Text = “Ouside Panel”;
10. }

Very Simple .Lets Run.But the results are not as of requirement .So

My Niece’s Bug Report

“When Ever the Mouse moves over the Black Board (Image Control) , status (Label Control) shows Outside Panel “ and that too logged on High Priority mode :). Logically it should not happen .To patch it up in the end i attached event handler to the Image control .But suppose the panel contains more than one image or controls then how pathetic it will be to attach event to all .

Year 2010 , I tried to implement same logic with WPF and it surprised me.

Track Mouse Challenge  , in WPF

Now with WPF i emulate the same logic as in my previous WinForm application and it worked .
and the code followed exactly same as above.

Code Snippet

1. private void pnlContainer_MouseMove(object sender, MouseEventArgs e)
2. {
3. pnlContainer.Background = Brushes.Red;
4. lblMouseLocation.Content = “With in Panel”;
5. }
6. private void pnlContainer_MouseLeave(object sender, MouseEventArgs e)
7. {
8. pnlContainer.Background = Brushes.Cyan;
9. lblMouseLocation.Content  = “With in Panel”;
10. }

e

Download the compiled programs and Check it.

Track Mouse Program (Simple WithOut WPF) Download
Track Mouse Program (Simple in WPF) Download

This is exactly where WPF introduces you to Routed Event.

What Is Routed Events

Routed events are the events that travel through the parent/ Child container of a control with raising  their events .The movement logic known as Routing Strategy (We will Digg into it in my next posts).

So events can also be captured at parent or child container instead of the particular control which invokes it.

Scenario Of Use

I know you will not agree with the scenario as mentioned above .

So some practical usage ,Consider a case of a normal calculator which contains 10 Numeric Button and Logical Operations .It is normal to write behind each control event , but what about code readability and scattered logic.Why should not we write a common logic part behind the parent container.

Another simple usage is YEs,No,Cancel button used in all our form. I can handle events of buttons in the container Boarder.

Technical Difference From CLR Events

WPF UI is a composite architecture based  , means a control can be consists of several other controls or resource .Lets have a look at the document outline of the TrackMouse application.The Border (Resembles to Panel in Winform) contains the image control element. The events are also followed as of the VisualTree above .The events of Image Element can be handled at its parent element Border.In Mouse Track program , Mouse Move of Image is a Routed event which invokes the parent Border Mouse move event also.Try to debug the code .

I know the Technical details are not sufficient and the scope of the particular post doesn’t allow it .In my next posts i will cover the Routing Events and Routing Strategy in depth.

Code for this Article -Routed Event Intro Download

That’s it for now , i hope you liked my niece’s intelligence :).