Measuring UI freeze in WPF applications with Reactive Extensions

Making sure an application doesn't freeze the UI is probably one of the most important concerns when building an application. UI freeze can be broken down into two categories,firstly long running background tasks and secondly the rendering of UI elements (controls) to the screen.

The second situation is what interests me with this post, usually UI based applications will dedicate a single thread to rendering the UI (dispatcher). This thread in theory can become overloaded with work and therefore the UI  becomes unresponsive to the user until the work is completed - the app freezes. Measuring this freeze on the dispatcher is useful in diagnosing the problems of rendering large amounts of data in a short time frame, e.g. like trying to render a large number of rows in a grid.

How can I measure this freeze?

You can do this easily with a couple of Rx methods:

Loading ....

The key is making sure they execute on the dispatcher thread. This ensures that when the dispatcher is overloaded they will not fire at the expected interval and therefore the interval between current & previous will be large enough for the stream to pump. This is then used at startup:

Loading ....

The following simple UI simulates the affect of overloading the dispatcher thread, you can see I've routed the button click through to a method which does a thread sleep on the dispatcher thread:

Loading ....

When the button is clicked serveral times I get the following output: