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. Image for the cookie policy date

Altimeter using SfCircularGauge


I would like to make an altimeter using SfCircularGauge. But I don't know how to rotate the needle over and over the gauge so that the 1 (as 100 m) will mean 1100 m after the 360°needle rotation. I would like to also use an animation so there was a problem when I made condition to point needle to 1 (when there was 1100) that it rotates backwards from 0 to 1 in place of forward. So is there any function that will help me to go over 0 and increasing needle value? 

Thank you for your answer

For better imagination

3 Replies

VR Vignesh Ramesh Syncfusion Team November 12, 2019 08:32 PM UTC

Hi Stanislav, 

Greetings from Syncfusion. 

We prepared the sample to rotate the needle over and over the gauge by disabling the animation of the NeedlePointer when its value reaches the EndValue of Scale and reset the it as StartValue of the Scale, before the Animation of the NeedlePointer was completed. Please find the snippet below. 

public double Value 
        return this.value; 
        if (this.value != value) 
            this.value = value; 
private async void ValidateValue(double value) 
    // If current value is Scale's End value 
    if (value == this.Gauge.Scales[0].EndValue) 
        await Task.Delay(this.resetDelay); 
        // little before the animation get completed, reset the NeedlePointer's value to Scale's StartValue without animation. 
        this.Gauge.Scales[0].Pointers[0].EnableAnimation = false; 
        this.Value = this.Gauge.Scales[0].StartValue; 
        this.Gauge.Scales[0].Pointers[0].EnableAnimation = true; 

Please find the sample from the below link. 

If your requirement is different from this, please provide additional information about your requirement. This would be helpful for us to give better solution. 


SP Stanislav Perina November 22, 2019 01:11 PM UTC


thank you for your solution. Now, as the entry values for pointer i am using stepper (for testing, later i am going to connect it with my bluetooth module with pressure sensor to get the entry values for pointer). But i still don´t know exactly how to use bindings from stepperValue from XAML to go through C#, back to needleValue. I know that it would be easier to bind that directly from stepperValue to needleValue, but i need to work with that value for the second needle which should be pointing at thousands (1000 meters ->1, 2000 meters ->2,...)  meanwhile the first needle should be pointing at hundreds (100 meters -> 1, 200 meters -> 2, ..., 1100 meters -> 1, ...). The final project should be deployed only on iPad. I attached file there, but i can´t move on.

Thank you for your help with my issues

Attachment: CircularGauge1416445247_3a0852f5.rar

RA Rachel A Syncfusion Team November 25, 2019 10:45 AM UTC

Hi Stanislav, 
We have analysed the given sample and found that the increased value returned from stepper is not getting updated in Value property. So, we have modified the sample and you can download it from the following link. 

Live Chat Icon For mobile
Up arrow icon