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
