Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Niall
100
Needle animation
posted

Hi,

I'd like to add some animation to my Gauge chart so that when the chart loads, the needle moves from 0 to the specified value.  Can you point me in the right direction?  I can't see anything in the samples which do this.

Thanks

  • 28496
    Suggested Answer
    Offline posted

    here's some code that should get you started:

            <igGauge:XamWebRadialGauge x:Name="theGauge" Loaded="theGauge_Loaded" >
                <igGauge:XamWebRadialGauge.Scales>
                    <igGauge:RadialGaugeScale StartValue="0" EndValue="100">
                        <igGauge:RadialGaugeScale.Needles>
                            <igGauge:RadialGaugeNeedle Value="0" />
                        </igGauge:RadialGaugeScale.Needles>
                    </igGauge:RadialGaugeScale>
                </igGauge:XamWebRadialGauge.Scales>
            </igGauge:XamWebRadialGauge>

            private void theGauge_Loaded(object sender, RoutedEventArgs e)
            {
                DoubleAnimation needleAnimation = new DoubleAnimation();
                needleAnimation.To = 77.0;
                needleAnimation.Duration = TimeSpan.FromSeconds(3.0);
                Storyboard loadedStoryboard = new Storyboard();
                loadedStoryboard.Children.Add(needleAnimation);
                Storyboard.SetTarget(needleAnimation, this.theGauge.Scales[0].Needles[0]);
                Storyboard.SetTargetProperty(needleAnimation, new PropertyPath(RadialGaugeNeedle.ValueProperty));
                loadedStoryboard.Begin();
            }