We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use a circular gauge control as a Quarter Gauge?

Platform: Xamarin.Android |
Control: SfCircularGauge |
Published Date: July 28, 2017 |
Last Revised Date: June 25, 2019

This article explains you to design a Quarter Gauge using 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.

 

Quarter Gauge using SfCircularGauge

 

 

Import the SfGauge namespace as shown below,

 

Xaml

xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"

 

 

  1. 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-

 

Quarter Gauge using SfCircularGauge

 

 

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-

 

 

Quarter Gauge using SfCircularGauge

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon