101 Rx Examples

Question

EDIT: Thanks for the link to the wiki, I think that since its already started there, its easier to go there to check it out. However the question here is also good, so people who are not around the msdn forums get to know about the wiki and where it is.

Short Question:

Do you have a Sample of Rx Code that could help people understand it better?

Long rambling with hidden question:

Now that the Rx framework has been released, I think that many of us are interested in getting the bits and trying them out. Sadly there really aren't many examples out there (after an exhaustive search I'm almost convinced Rx was meant only to do easy Drag on wpf apps).

I can't recall exactly where it was that I read or heard (I've been looking at many blogs and videos) that the Rx team seems to be interested in doing the 101 series...when they get enough time to do it... which pretty much sucks for those who want to understand it and play with it now (and I mean, what self-respected developer doesn't feel like a kid with a new toy when a new tech. like this comes up).

I've personally been giving a try now, but wow there are some crazy concepts in it... just to have methods names like Materialize and Zip makes me think of Teleporters and stuff from Back to the Future.

So, I think it would be nice if the ones with greater understanding, helped to build a collection of examples, ala 101 Linq Examples that goes from basic usage to more complex stuff, and pretty much cover all of the methods and their use, in a practical way (perhaps with a little bit of theory too, specially since these kind of concepts probably required it)

I think its great that MS devs take time to give us material like that, but I also think this community is good enough to start building our own material, dont you?

Solution 1

To start with - Here is 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. This is the result of my last week's hack on Rx

And here is the source code.

//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);
                }
                );
        }

Read my post with further explanation here and Download the source code here

Hope this helps

Solution 2

Another useful resource may be the Reactive Extensions (Rx) Koans: 55 progressive examples to help you learn Rx

Solution 3

I'm reading http://www.introtorx.com, which like the name suggests appears to be a concise introduction. There appear to be quite a lot of (very basic) examples, step-by-step, mostly using the console to print stuff out.

Solution 4

Here's my variation on the drag & drop sample by Wes Dyer, for Windows Forms (I'd make EnableDragging an extension method, probably):

    public Form2()
    {
        InitializeComponent();

        EnableDragging(pictureBox1);
        EnableDragging(button1);
        EnableDragging(this);
    }

    private void EnableDragging(Control c)
    {
        // Long way, but strongly typed.
        var downs = from down in Observable.FromEvent<MouseEventHandler, MouseEventArgs>(
                        eh => new MouseEventHandler(eh), 
                        eh => c.MouseDown += eh,  
                        eh => c.MouseDown -= eh)
                    select new { down.EventArgs.X, down.EventArgs.Y };

        // Short way.
        var moves = from move in Observable.FromEvent<MouseEventArgs>(c, "MouseMove")
                    select new { move.EventArgs.X, move.EventArgs.Y };

        var ups = Observable.FromEvent<MouseEventArgs>(c, "MouseUp");

        var drags = from down in downs
                    from move in moves.TakeUntil(ups)
                    select new Point { X = move.X - down.X, Y = move.Y - down.Y };

        drags.Subscribe(drag => c.SetBounds(c.Location.X + drag.X, c.Location.Y + drag.Y, 0, 0, BoundsSpecified.Location));
    }  

Solution 5

A bit late, but if somebody new stumbles upon this question, http://rxmarbles.com/ provides a very nice way to visualise the operators.

View more solutions

Comments

[Adam Houldsworth]

It may not be heavy on examples, but it is a very interesting and worthwhile read regardless.

[Morten Brudvik]

The link is dead.