How to design thermometer using the Xamarin Linear Gauge?
Description
This article describes how to design a thermometer using the Xamarin.Forms Linear Gauge control.
Solution
Xamarin.Forms linear gauge having the multiple scale support. So, you can design the linear gauge as thermometer by adding the Celsius scale, Fahrenheit scale, and Range scale. Also, by using the Annotation support, you can make the bottom of gauge as circle to look like thermometer.
The following steps demonstrates how to design a thermometer using the Xamarin.Forms linear gauge:
Step 1: In linear gauge Scales collection, create and add the scale for Fahrenheit by defining the start value in MinimumValue and end value in MaximumValue, Interval property of LinearScale.
… <gauge:SfLinearGauge.Scales> <gauge:LinearScale Interval="18" LabelColor="Gray" LabelPostfix="°F" MaximumValue="212" MinimumValue="32" MinorTicksPerInterval="1" ScaleBarColor="LightGray" ScaleBarLength="500" ScaleBarSize="16" Offset="-8"> <gauge:LinearScale.MajorTickSettings> <gauge:LinearTickSettings Thickness="1" Offset="20" Color="Gray" /> </gauge:LinearScale.MajorTickSettings> <gauge:LinearScale.MinorTickSettings> <gauge:LinearTickSettings Color="Gray" Offset="20" /> </gauge:LinearScale.MinorTickSettings> </gauge:LinearScale> … </gauge:SfLinearGauge.Scales> …
Step 2: Same as step 1 add the scale for Celsius by defining start value in MinimumValue and end value in MaximumValue, Interval property of LinearScale and placed this scale just opposite of Fahrenheit scale by setting the OpposedPosition as true. In this sample, you have provided the input in Celsius. So, added the BarPointer in this scale. The BarPointer is used to display the temperature value and also customized the BarPointer with CornerRadius, Color, and Thickness to make UI rich.
NOTE: The provided start, end and interval values should match the corresponding Fahrenheit values. I.e., if Fahrenheit start value is 32 means, then set the Celsius scale start value as 0.
… <gauge:SfLinearGauge.Scales> … <gauge:LinearScale Interval="10" LabelColor="Gray" LabelPostfix="°C" LabelOffset="-50" MaximumValue="100" MinimumValue="0" MinorTicksPerInterval="1" OpposedPosition="True" ScaleBarColor="LightGray" ScaleBarLength="500" ScaleBarSize="28" Offset="-8"> <gauge:LinearScale.MajorTickSettings> <gauge:LinearTickSettings Thickness="1" Offset="-20" Color="Gray" /> </gauge:LinearScale.MajorTickSettings> <gauge:LinearScale.MinorTickSettings> <gauge:LinearTickSettings Color="Gray" Offset="-20" /> </gauge:LinearScale.MinorTickSettings> <gauge:LinearScale.Pointers> <gauge:BarPointer CornerRadius="12" CornerRadiusType="End" Thickness="30" Color="Red" Value="86" /> </gauge:LinearScale.Pointers> </gauge:LinearScale> … </gauge:SfLinearGauge.Scales> …
Step 3: By adding the SfBorder as Annotation, to make the bottom of the linear gauge as circle and adjust their position using the OffsetX and OffsetY properties.
… <gauge:SfLinearGauge.Annotations> … <gauge:LinearGaugeAnnotation> <gauge:LinearGaugeAnnotation.OffsetX> <OnPlatform x:TypeArguments="x:Double"> <On Platform="UWP" Value="0.497" /> <On Platform="Android" Value="0.48" /> <On Platform="iOS" Value="0.48" /> </OnPlatform> </gauge:LinearGaugeAnnotation.OffsetX> <gauge:LinearGaugeAnnotation.OffsetY> <OnPlatform x:TypeArguments="x:Double"> <On Platform="UWP" Value="0.95" /> <On Platform="Android" Value="0.91" /> <On Platform="iOS" Value="0.91" /> </OnPlatform> </gauge:LinearGaugeAnnotation.OffsetY> <gauge:LinearGaugeAnnotation.View> <border:SfBorder BackgroundColor="Red" BorderColor="Red" BorderWidth="0" HeightRequest="50" WidthRequest="50" CornerRadius="25" /> </gauge:LinearGaugeAnnotation.View> </gauge:LinearGaugeAnnotation> … </gauge:SfLinearGauge.Annotations> …
Output:
You can find the sample in the following link:
https://github.com/SyncfusionExamples/xamarin_gauge_samples/tree/master/Samples/TemperatureScale
Conclusion
I hope you enjoyed learning how to design thermometer using the Xamarin Linear Gauge.
You can refer to our Xamarin Linear Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin Linear Gauge example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
