Geeks With Blogs
Adrian Hara Working through the .NET maze

It's been so long since I posted on the blog that doing it now makes me a bit feel a bit weird. In my defense, i've been quite busy these past months: I left my previous company, got married, moved to a new country, started work for a cool company here... in this order :)

More recently I've been working on a small app for Windows Phone 7 and one of the app's needs is some (fancy) know, the bar/pie/gauge kind. While there are some nice control libraries out there for bar and pie charts, they don't (to my knowledge) include also a gauge control.

So what's a wp7 developer to do? My first thought was to use the circular gauge control from codeplex as a starting point, with which I've played before, but I remembered it having some small annoyances. However, some further googling lead me to a fantastic article by Colin Eberhardt in which he builds a lookless circular gauge control. Now since I'm a big fan of MVVM the "lookless" part immediately jumped out so I dug into it. As said before, the article and code are brilliant, both easy to read and understand (as all of Colin's work actually).

Unfortunately, while the control works flawlessly on Silverlight 4, it doesn't out-of-the-box work on WP7's frankensteinian SL3/4 flavor. This is mainly because the WP7 version of Silverlight is missing the ability to use Bindings on DependencyObjects (which Colin's xaml heavily uses for example for Transforms), falling back to the Silverlight3-uesque (?) way of supporting only FrameworkElements.

The good news is that fixing this is a pretty straightforward, if a bit tedious, job. Attached at the end of the article you can find a solution which contains two projects, the original code as-is from Colin's blog and a WP7 project with the modified code that runs (at least in my) WP7 Emulator.

I won't go into great details here on the changes, feel free to explore the code or ask me directly (shameless twitter plug), but the highlights are:

  • the workaround I used for the missing binding functionality is based on behaviors, and more concretely, BindableBehaviors. These are, as surely the name says, the regular behaviors enhanced with data binding capabilities (otherwise they're still subject to the "can only bind on FrameworkElement" rule). The code for them is not mine, but was extracted pretty much as-is from the excellent nRoute framework (which also supports WP7 btw). The only reason I didn't add a reference to the nRoute framework (or its lighter cousin, the nRoute toolkit) was to not increase the download size, but by all means I encourage you to use it in your project by reference, since the code in it, including the BindableBehaviors, might be updated over time (which my code probably won't).
  • the way BindableBehaviors work is by "shadowing" each property you want to bind with a "PropertyNameBinding" property of type Binding, which is then behind-the-scenes added to an attached property dictionary on the behavior's target. If that seems like a mouthful I strongly encourage you to read the complete article on bindable dependency objects on Rishi's blog.
  • with the above in mind what I did was just replace the non-working bindings with behaviors that update the otherwise bound values themselves. There are some behaviors which work on the Transforms and another that builds the coloured ranges. Keep in mind that these were done pretty much in a quick and dirty fashion, so feel free to change/extend them to suit your needs.
  • as a minor tweak I also added a small animation to move the needle when the gauge value changes and updated the colors of the gauge ticks and labels to use some predefined WP7 resources, so they work on both light and dark backgrounds. The gauge's color is always gray-ish, but that could be updated as well to take into account the current theme and render in a more matching tone. Otherwise the gauge's design is unchanged from the original one.

I hope you find this useful and if you find any nasty bugs, please let me know.

Also, big thanks to Colin Eberhardt for such an outstanding article and to Rishi Oberoi for the awesome nRoute framework.

Link to source code download

Posted on Monday, October 11, 2010 1:00 PM | Back to top

Comments on this post: Radial Gauge control for Windows Phone 7

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Adrian Hara | Powered by: