Developing a (very) Lookless Silverlight Radial Gauge Control

This blog post describes the development of a lookless radial gauge control. In this post I will explore the use of an attached view model in order to move view specific properties and logic out of the control code in order to give a truly lookless control.

Today I had to get up far too early in order to catch an early morning flight to Copenhagen with a connection in Amsterdam. What to do for the six hours I would be travelling? Armed with a netbook and Visual Studio 2010 Express I thought it would be fun to have a go at developing a Silverlight gauge control. I know that there are already one or two free ones out there, with a decent looking one available on codeproject, however, it still felt like a good way to pass the time!

In order to make things a little more challenging I wanted to create a control that was truly lookless. So, what do I mean by this? Firstly a gauge control in its simplest sense displays the location of some indicator between a maximum and minimum value. There is nothing inherently circular about a gauge, thermometers are a good example of a linear gauge. So, I don’t want any ‘circular’ logic in the control itself. Secondly, custom controls often have certain expectations about the presence of named elements within their template. By this I mean that the template must contain, for example, a Path element called ‘needle’ which the control code will manipulate (The gauge published in the codeproject article above requires the presence of four named elements in the template). This forces certain constraints regarding how the control can be templated, this is really lookless is it?

The following example shows the gauge control which I created, and the rest of this post describes the implementation:

<local:GaugeControl Value="65" Width="200" Height="200"  
                   Maximum="100" Minimum="50"
                   x:Name="gauge">
 <local:GaugeControl.QualitativeRange>
   <local:QualitativeRanges>
     <local:QualitativeRange Color="Yellow" Maximum="75"/>
     <local:QualitativeRange Color="Orange" Maximum="90"/>
     <local:QualitativeRange Color="Red" Maximum="100"/>
   </local:QualitativeRanges>
 </local:GaugeControl.QualitativeRange>
</local:GaugeControl>

Read more: Scott Logic

Posted via email from .NET Info