A Reactive Extension (Rx) use case in a Windows Phone app

While working on my todo-list application 2Day, I encountered a situation where Rx came to the rescue. Rx (Reactive Extension) is a framework which has been available for a couple of years now. It is possible to use it on the phone very easily. In this blog post, I share a piece of code which use Rx to implement a specific feature in 2Day.

2Day’s users have requested a search feature. The idea is simple: give the user a new page where he can type some text which then filters his tasks. Here is the feature in action in 2Day:

2Day - global search

Even though it seems very basic, I wanted to add an extra feature: perform the search a couple of milliseconds after the user actually stops typing. This prevents the search result to blink while the user types. It turns out it’s very easy to implement this using Rx which is dedicated to manipulate stream of observable items. Here is the code:

?View Code CSHARP
1
2
3
4
5
6
7
8
var seq = Observable
    .FromEventPattern<TextChangedEventArgs>(this.textbox, "TextChanged")
    .Throttle(TimeSpan.FromMilliseconds(500))
    .ObserveOnDispatcher()
    .Subscribe(e =>
    {
        this.viewmodel.SearchText = this.textbox.Text;
    });

The first step is to create the observable sequence using the FromEventPattern method which can turn an event into an observable stream. Then the Throttle method allows to “calm down” the stream, by requiring the specified amount of time to be spent before sending the item in the output stream.

This can be shown using the following diagram:

RxExampleThrottle

If the user presses quickly the letters “p”, “a”, “i” and “r” we will start the search only after the specified amount of time and not for each new letter. Notice that the subscribe method does not do a lot of things: it only sets a property on the ViewModel layer which actually performs the search.

Here is a simple yet useful use case for Rx. It’s very nice to have the library available out of the box on the phone. Hope it helps :-)

5 thoughts on “A Reactive Extension (Rx) use case in a Windows Phone app

  1. Hey.. I think the diagram and the description that you provided are not very precise.. The event will not fire for as long as you type at least one character in 499 milliseconds. So, it you type 10 characters with one character in 499 ms, the event will not be fired for around 5 secs.

    the diagram could be updated to display time between x5 and x4 to be more or equal to 500 ms..

    Otherwise, a nice example of Rx. This is very helpful for devs out there.

  2. Hi,
    Couldn’t you do the same thing more easily by using the Binding Delay property introduced in .NET 4.5 ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>