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

10 posts, 0 answers
  1. Nick Busby
    Nick Busby avatar
    4 posts
    Member since:
    Jul 2009

    Posted 24 Aug 2009 Link to this post

    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.
  2. Velin
    Admin
    Velin avatar
    391 posts

    Posted 27 Aug 2009 Link to this post

    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.
  3. DevCraft banner
  4. Nick Busby
    Nick Busby avatar
    4 posts
    Member since:
    Jul 2009

    Posted 27 Aug 2009 Link to this post

    Sorry, i have multiple issues, i was able to solve this one and thought that this was another issue.
  5. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 13 Jul 2010 Link to this post

    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
  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 14 Jul 2010 Link to this post

    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"
        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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 15 Jul 2010 Link to this post

    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

     

  8. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Jul 2010 Link to this post

    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"
        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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 16 Jul 2010 Link to this post

    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
  10. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 16 Jul 2010 Link to this post

    Fantastic, that works a treat :-)

    Gr8 work guys.

    Regards
    Paul
Back to Top
DevCraft banner