How to design the fuel meter using the .NET MAUI Radial Gauge (SfRadialGauge)

7 mins read

Creating a fuel meter using the Syncfusion® .NET MAUI Radial Gauge involves several steps. This article will assist you in setting up a visually compelling fuel meter from initializing controls to customizing its style and functionality.

Step 1: Create the SfRadialGauge control by referring to this getting started documentation and add the RadialAxis.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 2: Configure the StartAngle property to 180 and the EndAngle property to 0.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis StartAngle="180"
                          EndAngle="0">
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 3: Customize the RadialAxis by setting properties to hide ticks, labels, and axis lines to achieve a clean look.

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 RadialRange into the Ranges list of Axes.

XAML

<gauge:RadialAxis.Ranges>
    <gauge:RadialRange StartValue="0"
                       EndValue="10"
                       WidthUnit="Factor"
                       StartWidth="0.035"
                       EndWidth="0.045"
                       Fill="Red">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="12"
                       EndValue="20"
                       WidthUnit="Factor"
                       StartWidth="0.045"
                       EndWidth="0.055"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="22"
                       EndValue="30"
                       WidthUnit="Factor"
                       StartWidth="0.055"
                       EndWidth="0.065"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="32"
                       EndValue="40"
                       WidthUnit="Factor"
                       StartWidth="0.065"
                       EndWidth="0.075"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="42"
                       EndValue="50"
                       WidthUnit="Factor"
                       StartWidth="0.075"
                       EndWidth="0.085"
                       Fill="Black">
    </gauge:RadialRange>
 
    <gauge:RadialRange StartValue="52"
                       EndValue="60"
                       WidthUnit="Factor"
                       StartWidth="0.085"
                       EndWidth="0.095"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="62"
                       EndValue="70"
                       WidthUnit="Factor"
                       StartWidth="0.095"
                       EndWidth="0.105"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="72"
                       EndValue="80"
                       WidthUnit="Factor"
                       StartWidth="0.105"
                       EndWidth="0.115"
                       Fill="Black">
    </gauge:RadialRange>
 
    <gauge:RadialRange StartValue="82"
                       EndValue="90"
                       WidthUnit="Factor"
                       StartWidth="0.115"
                       EndWidth="0.125"
                       Fill="Black">
    </gauge:RadialRange>
    <gauge:RadialRange StartValue="92"
                       EndValue="100"
                       WidthUnit="Factor"
                       StartWidth="0.125"
                       EndWidth="0.135"
                       Fill="Black">
    </gauge:RadialRange>
</gauge:RadialAxis.Ranges>

Step 5: Add a NeedlePointer and set its value to indicate the current fuel level.

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 pointer to change the range color based on the current value of a pointer.

Step 6: To customize the RadialAxis view as a fuel meter, use the Annotation 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

Fuel meter using Syncfusion .NET MAUI Radial Gauge control.

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to design the fuel meter using the .NET MAUI Radial Gauge.

You can refer to our .NET MAUI Radial Gauge feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Radial Gauge documentation to understand how to create and manipulate data.

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

Please let us know in the comments section below 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!

Did you find this information helpful?

Yes

Comments (0)

How to design the fuel meter using the .NET MAUI Radial Gauge (SfRadialGauge)

Access denied