Skip to main content

Rx Framework Part II - Observables From Events and ‘LINQ to Events’ – With a WPF Drawing demo

In my last post, I gave a high level overview about .NET Reactive Extensions (Rx), Push and Pull data sequences, and creating Observables from .NET events. In this post, we’ll explore more Observables from Events, and the ‘LINQ to Event’ aspect. We’ll create a small drawing application in WPF in declarative style. You may want to download the related source code to play with

A note on the source code. I’m using the System.Reactive.dll, that I rebased to .NET CLR using Reflexil. It is just for demo purposes, and is not expected to include in your production deployments.

Event To Observables

To recap, as described in my last post, you may use the Observable.FromEvent method to create Observables from events and subscribe to them, like,

var allKeyDowns = Observable.FromEvent<KeyEventHandler, KeyEventArgs>
                (   h => new KeyEventHandler(h), 
                    h => el.KeyDown += h, 
                    h=> el.KeyDown -= h
                 );

As we’ve seen earlier, allKeyDowns is an Observable, of type IObservable<Event<KeyEventArgs>> .

It is a good practice to wrap the creation of an observable from an event in an extension method. Let us create a handy GetKeyDown() extension method to create an Observable from the key down event, for any UI Element.

public static class UIElementExtensions 
 {							
      public static IObservable<Event<KeyEventArgs>> GetKeyDown 
                                                      (this UIElement el)
        {                        
            var allKeyDowns = Observable.FromEvent<KeyEventHandler, KeyEventArgs>
                (   h => new KeyEventHandler(h), 
                    h => el.KeyDown += h, 
                    h=> el.KeyDown -= h
                 );

            return  allKeyDowns;            
        }
}				

Also, you may easily abstract this out. For example, assume that you are building a racing game, and you might need to subscribe only to Arrow Key downs. You may create an extension method GetArrowKeyDown the arrow key down events. 

      //Get the arrow keys down only
       public static IObservable<Event<KeyEventArgs>> GetArrowKeyDown
				(this UIElement el)
       {
	   var arrows = new List<Key> 
                               { Key.Left, Key.Right, Key.Up, Key.Down };
	   var arrowsPressed = from kd in el.GetKeyDown()
				 where arrows.Contains(kd.EventArgs.Key)
				 select kd;
	   return arrowsPressed;

       }	

    //---- 
  
    //Some where in your main application

    var arrowPressed=this.GetArrowKeyDown();
    arrowPressed.Subscribe(arrow=>MessageBox.Show
                    (arrow.EventArgs.Key.ToString() + " Pressed!!")); 

 

Sequencing the events

Let us create a simple drawing application, so that when the user drags, we draw a red line from the initial mouse down position to the current location, and also a blue spot at the current location. Here is what I mean :)

image

And we’ll do the same in a declarative manner, instead of doing it the classical way. Assuming that you have the extension methods GetMouseUp, GetMouseDown, and GetMouseMove for the corresponding Mouse Events, let us see how to handle a drag operation, in a declarative manner. You may see how simple this approach is - instead of having event handlers sprinkled every where

//A draw on drag method to perform the draw
void DrawOnDrag(Canvas e)
        {

            //Get the initial position and dragged points using LINQ to Events
            var mouseDragPoints = from md in e.GetMouseDown()
                                  let startpos=md.EventArgs.GetPosition(e)
                                  from mm in e.GetMouseMove().Until(e.GetMouseUp())
                                  select new
                                  {
                                      StartPos = startpos,
                                      CurrentPos = mm.EventArgs.GetPosition(e),
                                  };


            //Subscribe and draw a line from start position to current position
            mouseDragPoints.Subscribe
                (item =>
                {
                    e.Children.Add(new Line()
                    {
                        Stroke = Brushes.Red,
                        X1 = item.StartPos.X,
                        X2 = item.CurrentPos.X,
                        Y1 = item.StartPos.Y,
                        Y2 = item.CurrentPos.Y
                    });

                    var ellipse = new Ellipse()
                    {
                        Stroke = Brushes.Blue,
                        StrokeThickness = 10,
                        Fill = Brushes.Blue
                    };
                    Canvas.SetLeft(ellipse, item.CurrentPos.X);
                    Canvas.SetTop(ellipse, item.CurrentPos.Y);
                    e.Children.Add(ellipse);
                }
                );
        }

 image

One very interesting point there - we are running a LINQ query against the observables, and creating a new observable of an anonymous type that has two properties, StartPos and CurrentPos. If you examine the type of mouseDragPoints, you'll see this >.

And here are the related GetEventName wrapper methods, for MouseUp, MoveMove and MouseDown. You may read more about Observable.FromEvent method we use below in my previous post about .NET Rx, if you havn't yet read that.

 public static class UIElementExtensions 
{
 
  public static IObservable<Event<MouseButtonEventArgs>> 
                                      GetMouseUp (this UIElement el)
        {                        
            var allevents = Observable.FromEvent<MouseButtonEventHandler, MouseButtonEventArgs>
                (   h => new MouseButtonEventHandler(h), 
                    h => el.MouseUp += h, 
                    h=> el.MouseUp -= h
                 );

            return allevents;            
        }
		
						
   public static IObservable<Event<MouseButtonEventArgs>> 
                                      GetMouseDown (this UIElement el)
	{                        
		var allevents = Observable.FromEvent<MouseButtonEventHandler, MouseButtonEventArgs>
			(   h => new MouseButtonEventHandler(h), 
				h => el.MouseDown += h, 
				h=> el.MouseDown -= h
			 );

		return allevents;            
	}		
	
 public static IObservable<Event<MouseEventArgs>> 
                               GetMouseMove (this UIElement el)
        {                        
            var allevents = Observable.FromEvent<MouseEventHandler, MouseEventArgs>
                (   h => new MouseEventHandler(h), 
                    h => el.MouseMove += h, 
                    h=> el.MouseMove -= h
                 );

            return allevents;            
        }	
		
}

If you havn’t yet done, read my other posts on .NET Rx as well. Also, have a look at this T4 template to generate all those GetEventName wrapper methods for a given type.

 

Enjoy coding!!

Shout it

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…

Hack Raspberry Pi – How To Build Apps In C#, WinForms and ASP.NET Using Mono In Pi

Recently I was doing a bit of R&D related to finding a viable, low cost platform for client nodes. Obviously, I came across Raspberry Pi, and found the same extremely interesting. Now, the missing piece of the puzzle was how to get going using C# and .NET in the Pi. C# is a great language, and there are a lot of C# developers out there in the wild who are interested in the Pi.In this article, I’ll just document my findings so far, and will explain how develop using C# leveraging Mono in a Raspberry Pi. Also, we’ll see how to write few minimal Windows Forms & ASP.NET applications in the Pie as well.Step 1: What is Raspberry Pi?Raspberry Pi is an ARM/Linux box for just ~ $30. It was introduced with a vision to teach basic computer science in schools. How ever, it got a lot of attention from hackers all around the world, as it is an awesome low cost platform to hack and experiment cool ideas as Pi is almost a full fledged computer.  More About R-Pi From Wikipedia.The Raspberry Pi