Dial360
The Dial360 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.
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
The face and needle 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.
If you set a color range to a single value, you get a single color. Here is the markup to show the
Dial face as a magenta color
<db:Dial360 x:Name="_dial" Value="32">
<db:Dial360.FaceColorRange>
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
</db:Dial360.FaceColorRange>
</db:Dial360>
The ColorRange is a collection of ColorPoints. Each ColorPoint consists of a LowColor, HighColor and a Value. The Low and High Colors specify the
two ends of a gradient fill. You need to experiment to see what values look good. The Value specifies the start point of the color range. In the previous example the color starts at 0 and therefore is constant across all values
Let's assume that we want a dial for engine temperature and that above 90o the engine begins to fail. To help the driver we want the dial background to change
to red above 85o The following peace of XAL specifies a color range with a base color from 0..84 and red from
85 on wards.
<db:Dial360 x:Name="_dial" Value="32">
<db:Dial360.FaceColorRange>
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0000" Value="85" />
</db:Dial360.FaceColorRange>
</db:Dial360>
The preceding code assumes that two namespaces are declared to allow the XAML to
function, these are definied on the main page.
TextColor takes a standard silverlight color and TextVisibility can be Visibility.Collapsed or Visibility.Visible
Showing is better than telling so here are the color ranges in action
|
First here is our example changing the back ground of the dial to red above 55o and the Text color to Yellow
<db:Dial360 x:Name="_dial0" Grid.Row="0" TextColor="Yellow" >
<db:Dial360.FaceColorRange>
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0000" Value="55" />
</db:Dial360.FaceColorRange>
</db:Dial360>
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:Dial360 x:Name="_dial1" Grid.Row="1" TextVisibility="Collapsed" >
<db:Dial360.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:Dial360.NeedleColorRange>
</db:Dial360>
And finally. If you really want to harm and confuse your users, you can modify both
<db:Dial360 x:Name="_dial2" Grid.Row="2">
<db:Dial360.FaceColorRange>
<db:ColorPoint HiColor="#2A242C" LowColor="#6C0680" Value="0" />
<db:ColorPoint HiColor="#2A242C" LowColor="#220000" Value="55" />
</db:Dial360.FaceColorRange>
<db:Dial360.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:Dial360.NeedleColorRange>
</db:Dial360>
|
That's it for the 360 degree dial for now.