Gauge components for Windows Phone beta

The first beta release for our Windows Phone controls is here and along with the jump-list, super-fast list box, data engine and the mandatory controls polish we also managed to squeeze in some completely new gauge components.

The gauges for windows phone more closely resemble a miniature library of classes rather than single reusable components because there are so many properties to tweak. It makes no sense to try and encapsulate all of this flexibility in a single object with some properties.

During the design-phase of the gauges a few questions popped up the most important of which is, of course, what exactly is a gauge? It turns out that it is a combination of one or more scales which indicate some arbitrary value range, and indicators that point, in one way or another, to some specific value of their respective range. In the simplest case, there is one scale (value range) which contains zero or more indicators.

As you have probably guessed the notion of a range and an indicator leads to two parallel class hierarchies, one for the ranges and one for the indicators. The range hierarchy is very shallow and consists of only three classes: the base GaugeRange, a RadialGaugeRange and a LinearGaugeRange. With these, you can achieve 99% of the gauge designs. The indicators hierarchy on the other hand is a bit deeper as well as broader and it would be silly to list all of the 11 classes here. Basically the indicators can be bars, markers and needles.

This architecture turned out to be very simple and lightweight and fits really well within the phone's performance restrictions. The value ranges are static 99% of the time and simply stay on screen with no logic running internally. The indicators on the other hand have only one thing that can potentially change with high frequency and this is their Value property. We took one step further and optimized what happens on value changed in every single indicator so that there is minimum overhead on the UI thread. All of this combined with the rich data visualization support in Silverlight (DataTemplate) leads to some very clean and beautiful Metro-inspired designs. But don’t take my word for it, have a look:

The only thing missing from the gauges thus far is the numeric indicator, you know, the one that looks like a digital clock, and extended design-time support but we are already working on that.

In order to see the gauges in action you can download our examples app from the Windows Phone marketplace or download the beta controls from our website and dive in the code immediately. User feedback is always welcome and we’d be happy to hear any thoughts and/or constructive criticism.