Animation lost when setting needle.Value in the C# File

[Nick Busby]

I have a full circle gauge and if i have interactive on the animation works fine.  When i turn IsInteractive="false" and try to set the needle.Value  the animation does not work and it just jumpes to that number.  Is there a work around to get the animation to work or am i doing something wrong?

edit : i found out that after i set radialScale is when the problem happens, i have checked needle.IsAnimated and it still says true but it does not animate.

radialScale.Max = graphicsLayer.Graphics.Count;
int temp = 0;
foreach (Graphic g in graphicsLayer)
{
    if (g.Geometry != null)
    {
        temp++;
    }
}
needle.Value = temp;

if i comment out the radialScale.Max = graphics. . . . line then it works fine except the radialScale is wrong.
Please Help.

[Velin]

Hi Nick,

Unfortunately, we were not able to reproduce the problematic behavior you described.  We would ask you to prepare and send us a simple example project which we could inspect to provide a solution to the problem.

Thank you.

Sincerely,
Velin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Nick Busby]

Sorry, i have multiple issues, i was able to solve this one and thought that this was another issue.

[madladuk]

I have the same problem. I set the value of the needle however when it draws the gauge it does not appear to animate it? Is there any settings for the time it takes to draw the needle value?

P

[Andrey]

Hello madladuk,

You can use the Duration property to set animation time for movement needle from one value to another.
The sample XAML code is below.

<UserControl x:Class="NeedleAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGauge Width="300" Height="300">
            <telerik:RadialGauge>
                <telerik:RadialScale
                    x:Name="scale">
                    <telerik:IndicatorList>
                        <telerik:Needle
                            x:Name="needle"
                            IsAnimated="True"
                            Duration="00:00:01"/>
                    </telerik:IndicatorList>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</UserControl>

If you create the gauge within a code and you need to animate initial value of the needle, then you can use Dispatcher.BeginInvoke method to set a value after the gauge is rendered.
The sample code is the following:

public partial class MainPage : UserControl

{

    private delegate void SetInitialValueDelegate(Needle needle, double value);


    public MainPage()

    {

        InitializeComponent();


        Loaded += new RoutedEventHandler(MainPage_Loaded);

    }


    private void MainPage_Loaded(object sender, RoutedEventArgs e)

    {

        RadGauge radGauge = new RadGauge();


        RadialGauge radialGauge = new RadialGauge();

        radGauge.Content = radialGauge;


        RadialScale scale = new RadialScale();

        radialGauge.Items.Add(scale);


        Needle needle = new Needle()

        {

            Name = "needle",

            IsAnimated = true,

            Duration = TimeSpan.FromSeconds(1)

        };

        scale.Indicators.Add(needle);


        LayoutRoot.Children.Add(radGauge);

        this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, 90);

    }


    private void SetInitialValue(Needle needle, double value)

    {

        needle.Value = value;

    }

}

Also note that the indicator animation requires specifying the Name property.

All the best,
Andrey Murzov
the Telerik team

[madladuk]

Thanks, that works fine, if you leave the value as "90", however if I try to pass in my dynamic value again the animation stops;

This does not animate

 

 

double value = Convert.ToDouble(dr[dashitem.yfield]);

 

 

 

this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, value);

This does

 

this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, 90);


Thanks
Paul

 

[Andrey]

Hello Paul,

I'm sorry but we aren't able to reproduce the problem. I've created a very simple application (see XAML and C# code below) where SetInitialValue is invoked on timer tick with randomly created value.The animation works fine.

<UserControl x:Class="Telerik.RadGauge.Silverlight.Q1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Gauges;

namespace Telerik.RadGauge.Silverlight.Q1
{
    public partial class MainPage : UserControl
    {
        private delegate void SetInitialValueDelegate(Needle needle, double value);

        private Needle needle;

        private DispatcherTimer timer;

        public MainPage()
        {
            InitializeComponent();

            timer = new DispatcherTimer()
            {
                Interval = TimeSpan.FromSeconds(2)
            };

            timer.Tick += new EventHandler(timer_Tick);

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            Telerik.Windows.Controls.RadGauge radGauge = new Telerik.Windows.Controls.RadGauge();

            RadialGauge radialGauge = new RadialGauge();
            radGauge.Content = radialGauge;

            RadialScale scale = new RadialScale();
            radialGauge.Items.Add(scale);

            this.needle = new Needle()
            {
                Name = "needle",
                IsAnimated = true,
                Duration = TimeSpan.FromSeconds(1)
            };
            scale.Indicators.Add(needle);

            LayoutRoot.Children.Add(radGauge);

            this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, 90);

            timer.Start();
        }

        private void SetInitialValue(Needle needle, double value)
        {
            needle.Value = value;
        }

        void timer_Tick(object sender, EventArgs e)
        {
            Random rnd = new Random();
            double value = 100 * rnd.NextDouble();
            this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), this.needle, value);
        }
    }
}

Could you, please, create small solution which reproduce your problem and send it to us so we could check what is wrong.

Greetings,
Andrey Murzov
the Telerik team

[madladuk]

private delegate void SetInitialValueDelegate(Needle needle, double value);
       private void SetInitialValue(Needle needle, double value)
       {
           needle.Value = value;
       }
       public GaugeItemControl()
       {
           InitializeComponent();
           this.Loaded += new RoutedEventHandler(GaugeItemControl_Loaded);
       }
       void GaugeItemControl_Loaded(object sender, RoutedEventArgs e)
       {
           try
           {
               RadialScale scale;
               Needle needle;
               StackPanel stackpanel = new StackPanel()
               {
                   HorizontalAlignment = System.Windows.HorizontalAlignment.Left,
                   VerticalAlignment = System.Windows.VerticalAlignment.Top
               };
               // create the RadGauge
               RadGauge radGauge = new RadGauge()
               {
                   Name = "gauge"
                   Width = 200,
                   Height = 200
               };
               // add RadGauge to the LayoutRoot
               //stackpanel.Children.Add(radGauge);
               // create the RadialGauge
               var gauge = new RadialGauge();
               // add RadialGauge to the RadGauge
               radGauge.Content = gauge;
               // create the RadialScale
               scale = new RadialScale()
               {
                   Name = "scale"
                   Min = 0,
                   Max = 100,
                   Radius = 0.75d
               };

               // add RadialScale to the RadialGauge
               gauge.Items.Add(scale);
               // create the Needle
               needle = new Needle()
               {
                   Name = "needle",
                   IsAnimated = true,
                   Value = Convert.ToDouble(10),
                   Duration = TimeSpan.FromSeconds(10)
               };
               // add needle to indicators collection
               scale.Indicators.Add(needle);
               // create the Needle
               RadialBar bar = new RadialBar()
               {
                   Name ="bar",
                   IsAnimated = true,
                   Value = Convert.ToDouble(10),
               };
               // add needle to indicators collection
               scale.Indicators.Add(bar);

               Grid.SetRow(radGauge, 0);
               //LayoutRoot.Children.Insert(0, radGauge);
               LayoutRoot.Children.Add(radGauge);
               double value = 10;
               this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, value);


           }
           catch (Exception ex)
           {
           }
       }

From your first example it worked if I put a "physical" value in the BeginInvoke e.g. "90", however if I then replaced this with a variable then the animation stopped.

P

[Andrey]

Hi madladuk,

You specify the Value property of the needle twice in your sample code. When you invoke the SetInitialValue to set value to 10 then it is already 10.

needle = new Needle() 

{ 

    Name = "needle", 

    IsAnimated = true, 

    Value = Convert.ToDouble(10), 

    Duration = TimeSpan.FromSeconds(10)  

}; 


...


double value = 10; 

this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, value);  

So, the animation is absent.
You should remove setting of the Value property when you create new needle instance.

needle = new Needle() 

{ 

    Name = "needle", 

    IsAnimated = true, 

    Duration = TimeSpan.FromSeconds(10)  

}; 


...


double value = 10; 

this.Dispatcher.BeginInvoke(new SetInitialValueDelegate(this.SetInitialValue), needle, value);  

Regards,
Andrey Murzov
the Telerik team

[madladuk]

Fantastic, that works a treat :-)

Gr8 work guys.

Regards
Paul