How to use a circular gauge control as a circular progress bar?

3 mins read

This article explains you to design a circular progress bar using Circular Gauge.

Circular Gauge can be used as circular progress bar for various scenarios and control can be customized accordingly.

The following screenshot displays the circular progress bar using circular gauge.

Circular progress bar using xamarin SfCircularGauge control

In this article, three gauges are added in a layout each can be used for different scenarios.

Import the SfGauge namespace as shown below,

Xaml

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

Circular gauge for finding percentage of Shareholders in a company.

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

Xaml

<gauge:SfCircularGauge Grid.Row="0" BackgroundColor="Black" VerticalOptions="FillAndExpand">
  <gauge:SfCircularGauge.Scales>
    <gauge:Scale StartValue="0" EndValue="100" Interval="5" StartAngle="90"        SweepAngle="360" RimThickness="10" RimColor="#606060" ShowLabels="false"   MinorTicksPerInterval="0" ShowRim="true" ShowTicks="false" ScaleEndOffset="0.4" ScaleStartOffset="0.5">
    </gauge:Scale>
  </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Range Pointers can be used to know the percentage of Share Holders available.

Xaml

<gauge:Scale.Pointers>
  <gauge:RangePointer Value="60" Color="#CC0000" Thickness="10">
<gauge:RangePointer.StartOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.5" Android="0.5" WinPhone="1" />
</gauge:RangePointer.StartOffset>
<gauge:RangePointer.EndOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.4" Android="0.4" WinPhone="0.9" /> </gauge:RangePointer.EndOffset>  
  </gauge:RangePointer>
</gauge:Scale.Pointers>

Add headers to add percentage value of shareholders, since header can be positioned as required.

Xaml

<gauge:SfCircularGauge.Headers>
<gauge:Header Text="Share Holders" ForegroundColor="Gray" Position="0.3,0.2">
   <gauge:Header.TextSize>
         <OnPlatform x:TypeArguments="x:Double" iOS="16" Android="16" WinPhone="25" />
   </gauge:Header.TextSize>
 </gauge:Header>
<gauge:Header Text="60%" ForegroundColor="Gray" Position="0.5,0.5">
    <gauge:Header.TextSize>
         <OnPlatform x:TypeArguments="x:Double" iOS="16" Android="16" WinPhone="25" />
    </gauge:Header.TextSize>
</gauge:Header>
</gauge:SfCircularGauge.Headers>

Output for the above code snippet-

Finding percentage of shareholders using SfCircularGauge control

Circular gauge for finding progress of total Investors in a share market

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

Xaml

<gauge:SfCircularGauge Grid.Row="1" BackgroundColor="Black" WidthRequest="200" HeightRequest="500" VerticalOptions="FillAndExpand">
  <gauge:SfCircularGauge.Scales>
    <gauge:Scale StartValue="0" EndValue="100" Interval="5" StartAngle="90" SweepAngle="360" RimThickness="30" RimColor="#B2FF66" ShowLabels="false" MinorTicksPerInterval="2" ShowRim="true" ScaleStartOffset="0.5" ScaleEndOffset="0.4">
    </gauge:Scale>
  </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Using Major and Minor Ticks, progress bar can be customized in circular gauge

Xaml

<gauge:Scale.MajorTickSettings>
   <gauge:TickSettings  Color="Black" Thickness="3">
     <gauge:TickSettings.StartOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.5" Android="0.5" WinPhone="1" />
     </gauge:TickSettings.StartOffset>
     <gauge:TickSettings.EndOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.4" Android="0.4" WinPhone="0.9" />
     </gauge:TickSettings.EndOffset>
   </gauge:TickSettings>
</gauge:Scale.MajorTickSettings>
<gauge:Scale.MinorTickSettings>
   <gauge:TickSettings  Color="Black" Thickness="3" >
     <gauge:TickSettings.StartOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.5" Android="0.5" WinPhone="1" />
     </gauge:TickSettings.StartOffset>
     <gauge:TickSettings.EndOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.4" Android="0.4" WinPhone="0.9" />
     </gauge:TickSettings.EndOffset>
   </gauge:TickSettings>
</gauge:Scale.MinorTickSettings>

Add RangePointer in order to highlight the Investors percentage from Total.

Xaml

<gauge:Scale.Pointers>
  <gauge:RangePointer Value="48"  Color="Black" Thickness="30">
      <gauge:RangePointer.StartOffset>
        <OnPlatform x:TypeArguments="x:Double" iOS="0.5" Android="0.5" WinPhone="1" />
      </gauge:RangePointer.StartOffset>
      <gauge:RangePointer.EndOffset>
       <OnPlatform x:TypeArguments="x:Double" iOS="0.4" Android="0.4" WinPhone="0.9"/>
      </gauge:RangePointer.EndOffset>
 </gauge:RangePointer>
</gauge:Scale.Pointers>

Finally, Add header to indicate percentage value of Investors, since header can be positioned as required.

Xaml

<gauge:SfCircularGauge.Headers>
  <gauge:Header Text="Investors" ForegroundColor="Gray" Position="0.2,0.5">
     <gauge:Header.TextSize>
         <OnPlatform x:TypeArguments="x:Double" iOS="16" Android="16" WinPhone="16" />
     </gauge:Header.TextSize>
  </gauge:Header>
  <gauge:Header Text="48%"  ForegroundColor="Gray" Position="0.5,0.5">
     <gauge:Header.TextSize>
          <OnPlatform x:TypeArguments="x:Double" iOS="16" Android="16" WinPhone="16" />
     </gauge:Header.TextSize>
  </gauge:Header>
</gauge:SfCircularGauge.Headers>

Output for the above code snippet-

Progress of total Investors in a share market using xamarin SfCircularGauge

Circular gauge for finding percentage of Shareholders in a company.

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

Xaml

<gauge:SfCircularGauge Grid.Row="2" BackgroundColor="Black" VerticalOptions="FillAndExpand">
  <gauge:SfCircularGauge.Scales>
    <gauge:Scale StartValue="0" EndValue="100" Interval="5" StartAngle="90" SweepAngle="360" RimThickness="0.5" RimColor="#B2FF66" ShowTicks="false" ShowLabels="false" MinorTicksPerInterval="2" ShowRim="false"  ScaleStartOffset="0.6">
    </gauge:Scale>
  </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>

Ranges can be added to circular gauge, by which levels of progress can be differentiated using different colors.

Xaml

<gauge:Scale.Ranges>
   <gauge:Range StartValue="0" EndValue="70" OuterStartOffset="0.4" OuterEndOffset="0.4" InnerStartOffset="0.38" InnerEndOffset="0.38" Color="#CC0000" />
   <gauge:Range StartValue="70" EndValue="85"  Color="Black" />
   <gauge:Range StartValue="85" EndValue="100" OuterStartOffset="0.4" OuterEndOffset="0.4" InnerStartOffset="0.2" InnerEndOffset="0.2" Color="Yellow" />
</gauge:Scale.Ranges>

Add Header, to know the profit percentage, using header the position can be altered as required.

Xaml

<gauge:SfCircularGauge.Headers>
    <gauge:Header Text="Profit = 20%" ForegroundColor="Gray" Position="0.6,0.5">
       <gauge:Header.TextSize>
          <OnPlatform x:TypeArguments="x:Double" iOS="16" Android="16" WinPhone="16" />
       </gauge:Header.TextSize> 
</gauge:SfCircularGauge.Headers>

Finally, add all the three circular gauge in layout and set content as that layout.

Xaml

<Grid BackgroundColor="Black">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
</Grid>

Output for the above code snippet-

Finding percentage of shareholders of the company using xamarin SfCircluarGauge

Did you find this information helpful?

Yes

Comments

How to use a circular gauge control as a circular progress bar?

Access denied