Progressing Circular Gauge

[mobileguy]

Hi

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>

[Ramya Soundar Rajan]

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  

https://help.syncfusion.com/xamarin/circular-gauge/pointers#setting-animation-for-pointer 

 

Regards, 

Ramya S 

[mobileguy]

Hi thank you for the sample but also for the links which helped me achieve what I wanted.

excellent support

thanks

[Ramya Soundar Rajan]

Hi Mobileguy, 

 

Thanks for your update.  

  

We are glad to hear that given solution works. Please let us know if you would require any further assistance. 

 

Regards, 

Ramya S