How to design a thermometer using the .NET MAUI Linear Gauge?

The Syncfusion® .NET MAUI Linear Gauge (SfLinearGauge) provides support for designing a thermometer. The following demonstration helps you to understand how to design a thermometer using the SfLinearGauge.

C#:

We use two custom gauges: one for the Celsius scale and the other for the Fahrenheit scale. The marker values for both gauges are specified in a separate view.

public class CelsiusThermometer : SfLinearGauge
{
   public override List<GaugeLabelInfo> GenerateVisibleLabels()
   {
       List<GaugeLabelInfo> customLabels = new();

       customLabels.Add(new GaugeLabelInfo { Value = -20, Text = "-20" });
       customLabels.Add(new GaugeLabelInfo { Value = -10, Text = "-10" });
       customLabels.Add(new GaugeLabelInfo { Value = 0, Text = "0" });
       customLabels.Add(new GaugeLabelInfo { Value = 10, Text = "10" });
       customLabels.Add(new GaugeLabelInfo { Value = 20, Text = "20" });
       customLabels.Add(new GaugeLabelInfo { Value = 30, Text = "30" });
       customLabels.Add(new GaugeLabelInfo { Value = 40, Text = "40" });
       customLabels.Add(new GaugeLabelInfo { Value = 50, Text = "50" });

       return customLabels;
   }
}

public class FahrenheitThermometer : SfLinearGauge
{
   public override List<GaugeLabelInfo> GenerateVisibleLabels()
   {
       List<GaugeLabelInfo> customLabels = new();

       customLabels.Add(new GaugeLabelInfo { Value = -20, Text = "0" });
       customLabels.Add(new GaugeLabelInfo { Value = -8.5, Text = "20" });
       customLabels.Add(new GaugeLabelInfo { Value = 3, Text = "40" });
       customLabels.Add(new GaugeLabelInfo { Value = 14.5, Text = "60" });
       customLabels.Add(new GaugeLabelInfo { Value = 26, Text = "80" });
       customLabels.Add(new GaugeLabelInfo { Value = 37.5, Text = "100" });
       customLabels.Add(new GaugeLabelInfo { Value = 50, Text = "120" });
       return customLabels;
   }
} 

XAML:

Design a custom thermometer gauge for Celsius by setting the Minimum, Maximum and Interval properties and use the LinearShapePointer, BarPointer and LinearContentPointer to design the thermometer.

<local:CelsiusThermometer Orientation="Vertical"
                         HorizontalOptions="Center"
                         Minimum="-25"
                         Maximum="60"
                         Interval="10"
                         IsMirrored="True"
                         TickOffset="5"
                         ShowLine="False"
                         MinorTicksPerInterval="0">
   <gauge:SfLinearGauge.MajorTickStyle>
       <gauge:LinearTickStyle Stroke="#d6d6d6" />
   </gauge:SfLinearGauge.MajorTickStyle>
   <gauge:SfLinearGauge.BarPointers>
       <gauge:BarPointer Value="60"
                         CornerStyle="EndCurve"
                         Fill="#d6d6d6"
                         PointerSize="13" />
       <gauge:BarPointer Value="59.5"  
                         PointerSize="10"
                         CornerStyle="EndCurve"
                         Fill="White" />
       <gauge:BarPointer Value="{Binding Source={x:Reference thermoMeterShape}, Path=Value}"
                         PointerSize="5"
                         CornerStyle="EndCurve"
                         Fill="{Binding Source={x:Reference thermoMeterShape}, Path=Fill}" />
   </gauge:SfLinearGauge.BarPointers>
   <gauge:SfLinearGauge.MarkerPointers>
       <gauge:LinearShapePointer x:Name="thermoMeterShape"
                                 Value="35"
                                 Position="Inside"
                                 ShapeType="Triangle"
                                 IsInteractive="True"
                                 OffsetX="5"
                                 Fill="Darkblue"
                                 ShapeWidth="10"
                                 ShapeHeight="12" />
       <gauge:LinearShapePointer Value="-20"
                                 Position="Cross"
                                 ShapeType="Circle"
                                 Fill="White"
                                 Stroke="#d6d6d6"
                                 OffsetY="-1"
                                 ShapeHeight="25"
                                 ShapeWidth="25"
                                 Alignment="End"
                                 StrokeThickness="1.5" />
       <gauge:LinearShapePointer Value="-20"
                                 Position="Cross"
                                 ShapeType="Circle"
                                 Alignment="End"
                                 Fill="{Binding Source={x:Reference thermoMeterShape}, Path=Fill}"
                                 ShapeHeight="18"
                                 ShapeWidth="18"
                                 OffsetY="3" />
       <gauge:LinearShapePointer Value="-20"
                                 ShapeType="Rectangle"
                                 Fill="White"
                                 Position="Cross"
                                 ShapeHeight="2"
                                 ShapeWidth="11"
                                 OffsetY="1" />
       <gauge:LinearShapePointer Value="-20"
                                 ShapeType="Rectangle"
                                 Fill="{Binding Source={x:Reference thermoMeterShape}, Path=Fill}"
                                 Position="Cross"
                                 ShapeHeight="5"
                                 ShapeWidth="5"
                                 OffsetY="1" />
       <gauge:LinearContentPointer Value="60"
                                   Position="Inside"
                                   OffsetX="19"
                                   OffsetY="1">
           <gauge:LinearContentPointer.Content>
               <Label Text="°C" TextColor="Black" />
           </gauge:LinearContentPointer.Content>
       </gauge:LinearContentPointer>
   </gauge:SfLinearGauge.MarkerPointers>
</local:CelsiusThermometer>

XAML:

Design a custom thermometer gauge for Fahrenheit by configuring the necessary properties and using LinearContentPointer property to add and customize the required content.

<local:FahrenheitThermometer Orientation="Vertical"
                            HorizontalOptions="End"
                            ShowLine="False"
                            MinorTicksPerInterval="0"
                            Minimum="-25"
                            Maximum="60"
                            Interval="10" Margin="65,0,0,0">
   <gauge:SfLinearGauge.MajorTickStyle>
       <gauge:LinearTickStyle Stroke="#d6d6d6" />
   </gauge:SfLinearGauge.MajorTickStyle>
   <gauge:SfLinearGauge.MarkerPointers>
       <gauge:LinearContentPointer Value="60"
                                   OffsetX="10"
                                   Position="Inside">
           <gauge:LinearContentPointer.Content>
               <Label Text="°F"
                      TextColor="Black" />
           </gauge:LinearContentPointer.Content>
       </gauge:LinearContentPointer>
   </gauge:SfLinearGauge.MarkerPointers>
</local:FahrenheitThermometer>

Download the complete sample from GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to design a thermometer in the .NET MAUI Linear Gauge (SfLinearGauge).

Refer to our .NET MAUI Linear Gauge feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Linear Gauge documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Linear Gauge and other .NET MAUI components.

Please let us know in the comment section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!