Silverlight Dashboard components

Dial180

The Dial180 control is as conventional a control as you could ever image, it's round, it has a needle, it wouldn't look out of place in front of you in the drivers seat of a car. Nuff said.

Sans an other markup the default appearance of a Dial180 is

In addition to the value property (see the main page for a desctiption, this control has properties to specify:

The dial face color
The needle color
The TextColor
The TextVisibility

Color ranges

Both of the color properties for the dial are color ranges. A color range specifies the color used to render an item based on its current value. Color ranges are dependancy properties and are specifed in line in the XAML. The Dial360 documentation details the process.

TextColor takes a standard silverlight color and TextVisibility can be Visibility.Collapsed or Visibility.Visible

First here is our example changing the back ground of the dial to red above 55^o and setting the TextColor to Chocolate

<db:Dial180 x:Name="_dial0" Grid.Row="0" TextColor="Chocolate" >
    <db:Dial180.FaceColorRange>
        <db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
        <db:ColorPoint HiColor="#2A242C" LowColor="#6C0000" Value="55" />
    </db:Dial180.FaceColorRange>
</db:Dial180>

Ladies and gentlemen, for my next gauge... We change the needle color to be green 0..32, yellow 33..64 and red 65+, and hold the Text

<db:Dial180 x:Name="_dial1" Grid.Row="1" TextVisibility="Collapsed" >
    <db:Dial180.NeedleColorRange>
        <db:ColorPoint HiColor="#009900" LowColor="#44DD00" Value="0" />
        <db:ColorPoint HiColor="#9DC800" LowColor="#DDCC00" Value="33" />
        <db:ColorPoint HiColor="#660000" LowColor="#BB3300" Value="66" />
</db:Dial180.NeedleColorRange>  
</db:Dial180>

And finally. If you really want to harm and confuse your users, you can modify both

<db:Dial180 x:Name="_dial2" Grid.Row="2">
    <db:Dial180.FaceColorRange>
        <db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
        <db:ColorPoint HiColor="#2A242C" LowColor="#220000" Value="55" />
    </db:Dial180.FaceColorRange>
    <db:Dial180.NeedleColorRange>
        <db:ColorPoint HiColor="#009900" LowColor="#44DD00" Value="0" />
        <db:ColorPoint HiColor="#9DC800" LowColor="#DDCC00" Value="33" />
        <db:ColorPoint HiColor="#660000" LowColor="#BB3300" Value="66" />
    </db:Dial180.NeedleColorRange>
</db:Dial180>

Welcome page

Dave's Silverlight Dashboards and gauges

Dial180

Color ranges

Controls

Bits and pieces