Create Thermometer

In this tutorial we will show how the thermometer like gauge can be created using Manco Gauge control.

To create thermometer we will use 2 vertical scales: one for Celsius and one for Fahrenheit scale. We will start Celsius scale at -30 degree and end it at the 40 degree. Degrees in the Fahrenheit scale correspond to the degrees in the Celsius scale by following formula:

Fahrenheit Degree = (Celsius Degree * 9) / 5 - 32

At the beginning we should add a grid which will hold both Celsius and Fahrenheit scale and provide width and height for the relative measurement.

[XAML]

Add Celsius Scale
We will show Celsius at the left, so all labels and tick marks should be located at the left of the scale bar.

[XAML]

We will add text block to mark Celsius scale. We will add it as custom item. We wll set its location and font size using Relative Measurement:

[XAML]

Here is a snapshot of the result:

Manco Gauge control - Celsius Scale

Add Ranges
We will show few scale ranges to specify level of comfort depends of the current temperature. To add few ranges into the scale you must use Manco.DataVisualization.Scales.RangeList object. We will change appearance of the scale indicators depends on the scale range it points to. So we will set both Background and IndicatorBackground properties of the Manco.DataVisualization.Scales.ScaleRange object.

[XAML]

Here is a snapshot of the result:

Manco Gauge control - Celsius Scale with ranges

Add a bar indicator
We will use bar indicator that point to a value of the scale. We will change appearance of the bar indicators depends on the scale range it points to. So we set its UseRangeColor property to true.

[XAML]

Here is a snapshot of the result:

Manco Gauge control - Celsius Scale with bar indicator

Add Fahrenheit Scale
The next step is to add the Fahrenheit vertical scale. To get Fahrenheit scale show correspondent temperature we should start it at the -22 degree and end it at the 104 degree. To force Fahrenheit scale show "fine" labels like 20, 40, 60 we will shift start and end tick marks of this scale.

[XAML]

Here is a snapshot of the result:

Manco Gauge control - Thermometer with Celsius and Fahrenheit scales