|
How to use a circular gauge control as a circular progress bar? 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.
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"
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-
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-
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-
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
