How to design a fuel meter using Circular Gauge in Xamarin.Forms?

2 mins read

How to design a fuel meter using Circular Gauge?

This article explains you to design a fuel meter using Circular Gauge.

To design a fuel meter using Circular Gauge,

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

                //Initialize Circular Gauge
                SfCircularGauge circularGauge = new SfCircularGauge();
                ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
                circularGauge.VerticalOptions = LayoutOptions.FillAndExpand;
                circularGauge.BackgroundColor = Color.Black;
 
                //Scales
                Scale = new Scale();
                scale.StartValue = 0;
                scale.EndValue = 100;
                scale.Interval = 10;
                scale.StartAngle = 180;
                scale.SweepAngle = 180;
                scale.RimThickness = 20;
                scale.RimColor = Color.FromHex("#d14646");
                scale.ShowLabels=false;
                scale.ShowRim = false;
                scale.MinorTicksPerInterval = 2;
                scale.Interval = 5;

In fuel meter, the variations in fuel level can be identified by differentiating the Scale of Circular Gauge using Range in Circular Gauge. Fuel levels can be split up using range of different colors.

List<Range> range = new List<Range>();

Range range1 = new Range();

range1.StartValue = 0;

range1.EndValue = 40;

range1.Thickness = 20;

range1.Color = Color.FromHex("#006000");

Range range2 = new Range();

range2.StartValue = 40;

range2.EndValue = 80;

range2.Thickness = 20;

range2.Color = Color.FromHex("#8D8F00");

Range range3 = new Range();

range3.StartValue = 80;

range3.EndValue = 100;

range3.Thickness = 20;

range3.Color = Color.Red;

range.Add(range1);

range.Add(range2);

range.Add(range3);

scale.Ranges = range;

Add Major ticks and Minor ticks, which can be used to indicate the total number of fuel readings.

//Minor Ticks

TickSettings minor = new TickSettings();

minor.Length = 80;

minor.Color = Color.Black;

minor.Thickness = 10;

minor.Offset = Device.OnPlatform(0.05, -0.1, 0.3);

scale.MinorTickSettings = minor;

//Major Ticks

TickSettings major = new TickSettings();

major.Length = 80;

major.Color = Color.Black;

major.Thickness = 10;

major.Offset = Device.OnPlatform(0.05, -0.1, 0.3);

scale.MajorTickSettings = major;

In order to identify the exact level of fuel available, Range Pointer in Circular Gauge can be used as follows.

List<Pointer> pointers = new List<Pointer>();

RangePointer rangePointer = new RangePointer();

rangePointer.Value = 60;

rangePointer.Color = Color.Gray;

rangePointer.Thickness = 4;

rangePointer.Offset = Device.OnPlatform(0.05, 0.1, 0.3);

pointers.Add(rangePointer);

Headers in Circular Gauge can be used to render Text in Fuel Meter. Since positioning is possible with Header, different Texts can be positioned in the needed position.

Header header = new Header();

header.Text = "Fuel Meter";

header.TextSize = 20;

header.Position = Device.OnPlatform(iOS: new Point(.5, .6), Android: new Point(0.5, 0.5), WinPhone: new Point(0.32, 0.7));

header.ForegroundColor = Color.Gray;

Header full = new Header();

full.Text = "F";

full.TextSize = 40;

full.Position = Device.OnPlatform(iOS: new Point(.5, .6), Android: new Point(0.9, 0.5), WinPhone: new Point(0.32, 0.7));

full.ForegroundColor = Color.Gray;

Header empty = new Header();

empty.Text = "E";

empty.TextSize = 40;

empty.Position = Device.OnPlatform(iOS: new Point(.5, .6), Android: new Point(0.1,0.5), WinPhone: new Point(0.32, 0.7));

empty.ForegroundColor = Color.Gray;

Header value = new Header();

value.Text = "60%";

value.TextSize = 60;

value.Position = Device.OnPlatform(iOS: new Point(.5, .6), Android: new Point(0.5, 0.4), WinPhone: new Point(0.32, 0.7));

value.ForegroundColor = Color.Gray;

circularGauge.Headers.Add(full);

circularGauge.Headers.Add(empty);

circularGauge.Headers.Add(value);

circularGauge.Headers.Add(header);

The following screenshot displays the Fuel Meter using CircularGauge.

$C:\Users\Swathi.Gopal\Desktop\KB\swathi\Fuel_Meter_XformsAndroid.png$

Conclusion

I hope you enjoyed learning about how to design a fuel meter using Circular Gauge in Xamarin.Forms.

You can refer to our Xamarin.Forms Circular Gauge feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Circular Gauge documentation 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!

Did you find this information helpful?

Yes

Comments (0)

How to design a fuel meter using Circular Gauge in Xamarin.Forms?

Access denied