How to use a circular gauge control as a Quarter Gauge in Xamarin.Forms application?
This article explains you to design a Quarter Gauge using Xamarin Circular Gauge.
Circular Gauge can be used Quarter Gauge for various scenarios and control can be customized accordingly.
The following screenshot displays the Quarter Gauge using circular gauge.
Import the SfGauge namespace as shown below,
Xaml
xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
- How to use CircularGauge as Quarter Gauge”
Create a Xamarin application and initialize SfCircularGauge control in it. Set Gauge type as NorthWest using GaugeType property in order achieve Quarter Gauge.
Xaml
<gauge:SfCircularGauge GaugeType="NorthWest" BackgroundColor="Black" > <gauge:SfCircularGauge.Scales > <gauge:Scale x:Name="scale" ShowLabels="false" StartValue="0" EndValue="100" Interval="10" RimThickness="20" RimColor="Transparent" MinorTicksPerInterval="1"> </gauge:Scale> </gauge:SfCircularGauge.Scales> </gauge:SfCircularGauge>
Range can be used to know the percentage battery life.
Xaml
<gauge:Scale.Ranges> <gauge:Range StartValue="0" Offset="0.15" EndValue="20" Thickness="30" Color="#3B3D3B" /> <gauge:Range StartValue="20" Offset="0.15" EndValue="70" Thickness="30" Color="#747673" /> <gauge:Range StartValue="70" Offset="0.15" EndValue="100" Thickness="30" Color="#C5C7C4" /> </gauge:Scale.Ranges>
Add Needle Pointer to show current battery life
Xaml
<gauge:Scale.Pointers> <gauge:NeedlePointer Value="30" KnobRadius="50" Color="#FF6527" Type="Triangle" Thickness="20" KnobColor="#FF6527" LengthFactor="0.8"/> </gauge:Scale.Pointers>
Using Major and Minor Ticks, Quarter gauge can be customized in circular gauge
Xaml
<gauge:Scale.MajorTickSettings> <gauge:TickSettings Length="28" Color ="White" Thickness="5"/> </gauge:Scale.MajorTickSettings> <gauge:Scale.MinorTickSettings> <gauge:TickSettings Length="18" Color ="White" Offset="0.05" Thickness="5"/> </gauge:Scale.MinorTickSettings>
Finally, add header to indicate percentage value of battery, since header can be positioned as required.
Xaml
<gauge:SfCircularGauge.Headers> <gauge:Header Text="" Position="0.2,0.45" TextSize="45" ForegroundColor="White"/> </gauge:SfCircularGauge.Headers>
Output for the above code snippet-
Note-
SfCircularGauge type is determined by positioning the control towards particular direction. GaugeType is an enum property that provides the option to select type of the SfCircularGauge type
Please refer the following link for better understanding,
https://help.syncfusion.com/xamarin/circulargauge/gauge-type
Output for the above code snippet for GaugeType as NorthEast-
Conclusion
I hope you enjoyed learning about how to use a circular gauge control as a Quarter Gauge in Xamarin.Forms application.
You can refer to our Xamarin circular 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 circular 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!
