I must have tried reading through the various explanations and introductions to the new Reactive Extensions for .NET before the concepts finally started sinking in. The article that gave me the ah-ha moment was over on SilverlightShow.net and titled Using Reactive Extensions in Silverlight. The author did a good job comparing the "normal" way of handling events vs. the new "reactive" methods.
Admittedly, I still have more to learn about the Rx Framework, but I wanted to put together a sample project so I could start playing with the new Observable and IObservable<T> constructs. I decided to throw together a whiteboard application in Silverlight based on the Drawing with Rx example on the aforementioned article. At the very least, I figured I would learn a thing or two about a new technology, but my real goal is to create a fun application that I can share with the kids since they love drawing and coloring so much!
Here is the code sample that I borrowed from the article:
var mouseMoveEvent = Observable.FromEvent<MouseEventArgs>(this, "MouseMove");
var mouseLeftButtonDown = Observable.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonDown");
var mouseLeftButtonUp = Observable.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonUp");
var draggingEvents = from pos in mouseMoveEvent
.SkipUntil(mouseLeftButtonDown)
.TakeUntil(mouseLeftButtonUp)
.Let(mm => mm.Zip(mm.Skip(1), (prev, cur) =>
new
{
X2 = cur.EventArgs.GetPosition(this).X,
X1 = prev.EventArgs.GetPosition(this).X,
Y2 = cur.EventArgs.GetPosition(this).Y,
Y1 = prev.EventArgs.GetPosition(this).Y
})).Repeat()
select pos;
draggingEvents.Subscribe(p =>
{
Line line = new Line();
line.Stroke = new SolidColorBrush(Colors.Black);
line.StrokeEndLineCap = PenLineCap.Round;
line.StrokeLineJoin = PenLineJoin.Round;
line.StrokeThickness = 5;
line.X1 = p.X1;
line.Y1 = p.Y1;
line.X2 = p.X2;
line.Y2 = p.Y2;
this.LayoutRoot.Children.Add(line);
});
One thing that was nagging at the back of my mind was having to deal with the event names as strings, as well as the verbose syntax for the Observable.FromEvent<TEventArgs>() method. I came up with a couple of static/helper classes to resolve both issues and also created a T4 template to auto-generate these helpers for any .NET type. Take the following code from the above example:
var mouseMoveEvent = Observable.FromEvent<MouseEventArgs>(this, "MouseMove");
var mouseLeftButtonDown = Observable.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonDown");
var mouseLeftButtonUp = Observable.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonUp");
Turns into this with the new static Events class:
var mouseMoveEvent = Events.Mouse.
Move.On(this);
var mouseLeftButtonDown = Events.Mouse.LeftButtonDown.On(this);
var mouseLeftButtonUp = Events.Mouse.LeftButtonUp.On(this);
Or better yet, just remove the variable declarations altogether:
var draggingEvents = from pos in Events.Mouse.
Move.On(this)
.SkipUntil(Events.Mouse.LeftButtonDown.On(this))
.TakeUntil(Events.Mouse.LeftButtonUp.On(this))
.Let(mm => mm.Zip(mm.Skip(1), (prev, cur) =>
new
{
X2 = cur.EventArgs.GetPosition(this).X,
X1 = prev.EventArgs.GetPosition(this).X,
Y2 = cur.EventArgs.GetPosition(this).Y,
Y1 = prev.EventArgs.GetPosition(this).Y
})).Repeat()
select pos;
The
Move, LeftButtonDown and LeftButtonUp members of the Events.Mouse class are readonly instances of the ObservableEvent<TTarget, TEventArgs> class that provide type-safe access to the events via the On() method. Here is the code for the class:
using System;
using System.Collections.Generic;
using System.Linq;
namespace System.Linq
{
/// <summary>
/// Represents an event that can be managed via the <see cref="Observable"/> API.
/// </summary>
/// <typeparam name="TTarget">The type of the target.</typeparam>
/// <typeparam name="TEventArgs">The type of the event args.</typeparam>
public class ObservableEvent<TTarget, TEventArgs> where TEventArgs : EventArgs
{
/// <summary>
/// Initializes a new instance of the <see cref="ObservableEvent"/> class.
/// </summary>
/// <param name="eventName">Name of the event.</param>
protected ObservableEvent(String eventName)
{
EventName = eventName;
}
/// <summary>
/// Registers the specified event name.
/// </summary>
/// <param name="eventName">Name of the event.</param>
/// <returns></returns>
public static ObservableEvent<TTarget, TEventArgs> Register(String eventName)
{
return new ObservableEvent<TTarget, TEventArgs>(eventName);
}
/// <summary>
/// Creates an enumerable sequence of event values for the specified target.
/// </summary>
/// <param name="target">The target.</param>
/// <returns></returns>
public IObservable<IEvent<TEventArgs>> On(TTarget target)
{
return Observable.FromEvent<TEventArgs>(target, EventName);
}
/// <summary>
/// Gets or sets the name of the event.
/// </summary>
/// <value>The name of the event.</value>
public string EventName { get; private set; }
}
}
And this is how it's used:
/// <summary>
/// Categorizes <see cref="ObservableEvents"/> by class and/or functionality.
/// </summary>
public static partial class Events
{
/// <summary>
/// Implements a set of predefined <see cref="ObservableEvent"/>s
/// for the <see cref="System.Windows.System.Windows.UIElement"/> class
/// that represent mouse related events.
/// </summary>
public static partial class Mouse
{
/// <summary>Represents the MouseMove event.</summary>
public static readonly ObservableEvent<UIElement, MouseEventArgs>
Move =
ObservableEvent<UIElement, MouseEventArgs>.Register("MouseMove");
// additional members omitted...
}
}
The source code contains a static Events class with prefedined members for various categories (Key, Mouse, etc.). There is also an Events.tt template that you can customize to generate additional event categories for any .NET type. All you should have to do is add the name of your class to the types collection near the top of the template:
types = new Dictionary<String, Type>()
{
//{ "Microsoft.Maps.MapControl.Map, Microsoft.Maps.MapControl", null }
{ "System.Windows.FrameworkElement, System.Windows", null },
{ "Whiteboard.MainPage, Whiteboard", null }
};
The template is also a bit rough at this point, but at least it generates code that *should* compile. Please let me know if you run into any issues with it. Some people have reported errors when trying to use T4 templates within a Silverlight project, but I was able to get it to work with a little black magic...
You can download the source code for this project or play around with the live demo. Just be warned that it is at a very early stage so don't expect to find much today. I plan on adding alot more options like pen colors and sizes, saving, printing, etc. as time permits. HINT: hold down the ESC key to erase!
Enjoy!
Additional Resources
Using Reactive Extensions in Silverlight
DevLabs: Reactive Extensions for .NET (Rx)
Rx Framework Part III - LINQ to Events - Generating GetEventName() Wrapper Methods using T4
