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

how to apply animation on SfGauge Header

I am doing a timer using SfGauge as explained here https://www.syncfusion.com/kb/6620/how-to-use-a-circular-gauge-control-as-a-circular-progress-bar
For example I show countdown information in header as shown below and I would like to animate this in last 5 seconds. If I use label, I can achieve this as shown below but I cant figure out how to do this animation. Is it even possible?

          <gauge:Header x:Name="Timer" TextSize="85" ForegroundColor="Gray" Position="0.5,0.5">

                        Device.BeginInvokeOnMainThread(async () =>
                            if (1 < ts.TotalSeconds && ts.TotalSeconds < 6)
                                Timer.AnchorX = 0.48;
                                Timer.AnchorY = 0.48;
                                await Timer.ScaleTo(0.8, 50, Easing.Linear);
                                await Task.Delay(100);
                                await Timer.ScaleTo(1, 50, Easing.Linear);

1 Reply

AK Ashwin Kumaravel Syncfusion Team September 22, 2017 07:19 AM UTC

Hi Emil,

Thanks for using Syncfusion products,

We have validated your query “How to apply animation on SfGauge Header” and in our current implementation of Circular Gauge we do not have header animation support .We have achieve your requirement using label in the attached sample. Can you please download the sample from the below link?

Sample link-  http://www.syncfusion.com/downloads/support/forum/132796/ze/ProgressingCircular1765981987  


Please get back to us if you have any concerns.


Live Chat Icon For mobile
Up arrow icon