How to design fuel meter using WinUI Radial Gauge?
This article describes how to create the fuel meter using the Syncfusion WinUI Radial Gauge control.
Step 1: Create the SfRadialGauge control by referring to this getting started link and add the RadialAxis.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis> </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 2: Set the StartAngle property as 180 and EndAngle property as 0 to display a semi-circle gauge.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis StartAngle="180" EndAngle="0"> </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 3: Set the RadialAxis to hide the ticks, labels, and axis line as shown in the following code snippet.
XAML
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <gauge:RadialAxis ShowAxisLine="False" ShowLabels="False" ShowTicks="False" StartAngle="180" EndAngle="0"> </gauge:RadialAxis> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 4: Add the desired number of GaugeRange into the Ranges list of Axes.
XAML
<gauge:RadialAxis.Ranges> <gauge:GaugeRange StartValue="0" EndValue="10" WidthUnit="Factor" StartWidth="0.035" EndWidth="0.045" Background="Red"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="12" EndValue="20" WidthUnit="Factor" StartWidth="0.045" EndWidth="0.055" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="22" EndValue="30" WidthUnit="Factor" StartWidth="0.055" EndWidth="0.065" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="32" EndValue="40" WidthUnit="Factor" StartWidth="0.065" EndWidth="0.075" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="42" EndValue="50" WidthUnit="Factor" StartWidth="0.075" EndWidth="0.085" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="52" EndValue="60" WidthUnit="Factor" StartWidth="0.085" EndWidth="0.095" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="62" EndValue="70" WidthUnit="Factor" StartWidth="0.095" EndWidth="0.105" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="72" EndValue="80" WidthUnit="Factor" StartWidth="0.105" EndWidth="0.115" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange StartValue="82" EndValue="90" WidthUnit="Factor" StartWidth="0.115" EndWidth="0.125" Background="Black"> </gauge:GaugeRange> <gauge:GaugeRange x:Name="range10" StartValue="92" EndValue="100" WidthUnit="Factor" StartWidth="0.125" EndWidth="0.135" Background="Black"> </gauge:GaugeRange> </gauge:RadialAxis.Ranges>
Step 5: Add the NeedlePointer and set the pointer value to point the corresponding value in the axis range.
XAML
<gauge:RadialAxis.Pointers> <gauge:NeedlePointer NeedleLengthUnit="Factor" NeedleLength="0.85" NeedleStartWidth="1" NeedleEndWidth="7" NeedleFill="Red" Value="5" ValueChanged="NeedlePointer_ValueChanged" IsInteractive="True" KnobSizeUnit="Factor" KnobFill="Black" KnobRadius="0.09"> </gauge:NeedlePointer> </gauge:RadialAxis.Pointers>
Use the ValueChanged event of pointer, to change the range color based on the current value of pointer.
Step 6: To customize the RadialAxis view as fuel meter, use the Annotations as demonstrated in the following code sample.
XAML
<gauge:RadialAxis.Annotations> <gauge:GaugeAnnotation DirectionUnit="Angle" VerticalAlignment="Start" HorizontalAlignment="Center" PositionFactor="0"> <gauge:GaugeAnnotation.Content> <Image Source="fuel.jpg" Margin="0,0,0,50" WidthRequest="30" HeightRequest="30" /> </gauge:GaugeAnnotation.Content> </gauge:GaugeAnnotation> <gauge:GaugeAnnotation DirectionUnit="Angle" DirectionValue="0.5" VerticalAlignment="End" PositionFactor="0.9"> <gauge:GaugeAnnotation.Content> <Label Text="F" TextColor="Black" FontAttributes="Bold" FontSize="20" /> </gauge:GaugeAnnotation.Content> </gauge:GaugeAnnotation> <gauge:GaugeAnnotation DirectionUnit="AxisValue" DirectionValue="1" VerticalAlignment="End" HorizontalAlignment="Start" PositionFactor="0.95"> <gauge:GaugeAnnotation.Content> <Label Text="E" Margin="0,5,0,0" TextColor="Black" FontAttributes="Bold" FontSize="20" /> </gauge:GaugeAnnotation.Content> </gauge:GaugeAnnotation> </gauge:RadialAxis.Annotations>
Output
See also
How to create an application using the WinUI Radial Gauge?
How to customize the Range pointer?
How to customize the Needle pointer?
How to position and customize annotation?
How to customize the Radial range?
Conclusion
I hope you enjoyed learning on how to design a fuel meter using WinUI Radial Gauge(SfRadialGauge).
You can refer to our WinUI Radial 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 WinUI Radial 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!
