Progressing Circular Gauge

3 Replies
2 Participants
Marked answer

Created by
MO mobileguy

Platform
Xamarin.Forms

Platform
Xamarin.Forms

Control
SfCircularGauge

Created On
Aug 28, 2020 08:23 AM UTC

Last Activity On
Sep 3, 2020 05:35 AM UTC

Want to subscribe?
SIGN IN

New to the Circular gauge and wondering if is possible to make a progressing circular gauge I have achieved the following,

however I would like to know if you can make the main circular gauge progressing like the Marker pointer , that the color progresses and stops at the the range point

I did try to use the range pointer but just creates another pointer inside it.

Hope makes sense. thanks for any input

<gauge:SfCircularGauge Grid.Row="1" x:Name="CircularGauge" >

<gauge:SfCircularGauge.Scales>

<gauge:Scale StartValue="0" RadiusFactor="0.9"

Interval="50"

EndValue="100"

ShowRim="False"

ShowTicks="False"

ShowLabels="False">

<gauge:Scale.Ranges>

<gauge:Range Offset="0.8"

Thickness="25"

StartValue="0"

EndValue="100" >

<gauge:Range.GradientStops>

<gauge:GaugeGradientStop Value="0" Color="LightCyan"/>

<gauge:GaugeGradientStop Value="35" Color="LightBlue"/>

<gauge:GaugeGradientStop Value="75" Color="Blue"/>

<gauge:GaugeGradientStop Value="100" Color="DarkBlue"/>

</gauge:Range.GradientStops>

</gauge:Range>

</gauge:Scale.Ranges>

<gauge:Scale.Pointers>

<!--<gauge:RangePointer Value="60" Offset="0.4" Color="#CC0000" Thickness="10">

</gauge:RangePointer>-->

<gauge:MarkerPointer MarkerShape="InvertedTriangle"

MarkerHeight="15"

MarkerWidth="15"

Offset="0.8"

Value="80"

Color="Red"/>

</gauge:Scale.Pointers>

</gauge:Scale>

</gauge:SfCircularGauge.Scales>

<gauge:SfCircularGauge.Headers>

<gauge:Header Text="0"

TextSize="20"

ForegroundColor="DarkBlue"

FontAttributes="Bold"

Position="0.28, 0.86"/>

<gauge:Header Text="100"

TextSize="20"

FontAttributes="Bold"

ForegroundColor="DarkBlue"

Position="0.75, 0.86"/>

<gauge:Header Text="Left" TextSize="20" ForegroundColor="DarkBlue"

FontAttributes="Bold" Position="0.5,0.5"/>

<gauge:Header Text="40" TextSize="20" ForegroundColor="DarkBlue"

FontAttributes="Bold" Position="0.5,0.6"/>

</gauge:SfCircularGauge.Headers>

</gauge:SfCircularGauge>

3 Replies 1 reply marked as answer

RS Ramya Soundar Rajan Syncfusion Team August 31, 2020 09:54 AM UTC

Hi Mobileguy,

Greetings from Syncfusion.

We have checked your reported query with the provided code snippet. We would like to let you know that your requirement has been achieved by enabling the marker pointer animation and change the end value of range with the pointer value argument of PointerPositionChanged as per in below code snippet.

private void CircularGauge_PointerPositionChanged(object sender, Syncfusion.SfGauge.XForms.PointerPositionChangedArgs args)

{

range.EndValue = args.pointerValue;

}

SampleLink: https://www.syncfusion.com/downloads/support/forum/157379/ze/SfCircularGaugeDemo1035790417

Query: I did try to use the range pointer but just creates another pointer inside it.

If you want to make a progressing using the range pointer, please refer to the below sample.

https://github.com/SyncfusionExamples/How-to-create-a-similar-appearance-of-a-circular-progress-bar-using-Xamarin.Forms-SfCircularGauge

Please refer to the below link for more information.

https://www.syncfusion.com/kb/6620/how-to-use-a-circular-gauge-control-as-a-circular-progress-bar

https://www.syncfusion.com/kb/8292/how-to-enable-dragging-support-for-pointer

https://help.syncfusion.com/xamarin/circular-gauge/pointers#event