RadGauge CustomControl and Needle Animation

5 posts, 1 answers
  1. jason
    jason avatar
    28 posts
    Member since:
    Oct 2010

    Posted 22 Jun 2011 Link to this post

    My company has a large enterprise application and we will be needing to use the RadGauge and charts in many places throughout.  I have successfully created the RadCharts custom controls but have hit a snag with the RadGauge.  All works perfect except the needle animation.  Previously when I was using this gauge it was built right in the xaml so all I needed to do was name the needle to get it to animate.  I also saw a post that mentioned if you do it in code behind you need to implement this.RegisterName(...) to get the needle to animate.  My problem is that this is a custom control (i.e. Gauge : RadGauge) there is no way for me to RegisterName on the calling xaml page (at least i don't think there is).  Has anybody ever created a custom control from the gauge and gotten the needle to animate?  Any suggestions would be welcome.  thanks.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 23 Jun 2011 Link to this post

    Hi jason,

    You would not need to call RegisterName in the code behind in Silverlight. If you create indicator from the code, then you have to set its Name property and IsAnimated property. This will be enough. I hope it will help. If you still will have the problems, please, create a sample solution which demonstrates the problem and send it to us via new support ticket. We will investigate it and get back to you with our findings.

    Best 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
  3. DevCraft banner
  4. jason
    jason avatar
    28 posts
    Member since:
    Oct 2010

    Posted 24 Jun 2011 Link to this post

    There does not seem to be any RegisterName.  To clarify I am building this control in a class library not in a xaml code behind.  here is the class file of the control I made.  I have the name set and IsAnimated set to true but still no animation.  I tried to create a sample solution but am getting an error saying my control is not in the namespace.  if I change it from : RadGauge to something else (i.e. : TextBox) then it finds it so something with RadGauge.  So here is the class and the line of xaml that produces the animate problem.

    public enum GaugeType
       {
           Radial = 1,
           Linear = 2
       }
     
       public class Gauge : RadGauge
       {
           public Gauge()
           {
     
           }
     
           public static readonly DependencyProperty GaugeTypeProperty = DependencyProperty.Register("GaugeType", typeof(GaugeType), typeof(Gauge), new PropertyMetadata(OnGaugePropertiesChanged));
           public static readonly DependencyProperty MaxProperty = DependencyProperty.Register("Max", typeof(double), typeof(Gauge), new PropertyMetadata(100.00, OnGaugePropertiesChanged));
           public static readonly DependencyProperty MinProperty = DependencyProperty.Register("Min", typeof(double), typeof(Gauge), new PropertyMetadata(0.00, OnGaugePropertiesChanged));
           public static readonly DependencyProperty NeedleBackgroundProperty = DependencyProperty.Register("NeedleBackground", typeof(Brush), typeof(Gauge), new PropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 0, 0, 128)), OnGaugePropertiesChanged));
           public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double), typeof(Gauge), new PropertyMetadata(0.00, OnGaugePropertiesChanged));
     
           public double Value
           {
               get
               {
                   return (double)this.GetValue(ValueProperty);
               }
               set
               {
                   this.SetValue(ValueProperty, value);
               }
           }
     
           public Brush NeedleBackground
           {
               get
               {
                   return (Brush)this.GetValue(NeedleBackgroundProperty);
               }
               set
               {
                   this.SetValue(NeedleBackgroundProperty, value);
               }
           }
     
           public double Max
           {
               get
               {
                   return (double)this.GetValue(MaxProperty);
               }
               set
               {
                   this.SetValue(MaxProperty, value);
               }
           }
     
           public double Min
           {
               get
               {
                   return (double)this.GetValue(MinProperty);
               }
               set
               {
                   this.SetValue(MinProperty, value);
               }
           }
     
           public GaugeType GaugeType
           {
               get
               {
                   return (GaugeType)this.GetValue(GaugeTypeProperty);
               }
               set
               {
                   this.SetValue(GaugeTypeProperty, value);
               }
           }
     
           public static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
           {
               Gauge gauge = d as Gauge;
               gauge.needle.Value = gauge.Value;
           }
     
           public static void OnGaugePropertiesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
           {
               Gauge gauge = d as Gauge;
     
               if (gauge.GaugeType == GaugeType.Linear)
                   gauge.BuildLinearGauge();
               else
                   gauge.BuildRadialGauge();
           }
     
           public void BuildLinearGauge()
           {
               LinearGauge gauge = new LinearGauge();
               LinearScale scale = BuildLinearScale();
               gauge.Items.Add(scale);
               //gauge.Style = _resources["LinearStyle"] as Style;
               gauge.Background = new SolidColorBrush(Colors.Transparent);
               this.Content = gauge;
           }
     
           public void BuildRadialGauge()
           {
     
               RadialGauge gauge = new RadialGauge();
               RadialScale scale = BuildScale();
               gauge.Items.Add(scale);
               //  gauge.Style = _resources["RadialStyle"] as Style;
               gauge.Background = new SolidColorBrush(Colors.Transparent);
               this.Content = gauge;
     
           }
     
           private LinearScale BuildLinearScale()
           {
               LinearScale scale = new LinearScale();
               scale.Max = Max;
               scale.Min = Min;
               scale.MajorTick.Background = Navy;
               scale.MajorTick.Location = ScaleObjectLocation.OverCenter;
               scale.MiddleTick.Background = Navy;
               scale.MiddleTick.Length = .07;
               scale.MiddleTick.Location = ScaleObjectLocation.OverCenter;
               scale.MinorTick.Background = Navy;
               scale.MinorTick.Length = .05;
               scale.MinorTick.Location = ScaleObjectLocation.OverCenter;
               scale.Label.Location = ScaleObjectLocation.Outside;
               scale.Label.Offset = .02;
               //scale.Label.ItemTemplate = _resources["GaugeLabel"] as DataTemplate;
               scale.Indicators.Add(BuildMarker());
     
               return scale;
           }
     
           private RadialScale BuildScale()
           {
               RadialScale scale = new RadialScale();
               scale.Max = Max;
               scale.Min = Min;
               scale.Radius = 0.75;
               scale.MajorTick.Background = Navy;
               scale.MiddleTick.Background = Navy;
               scale.MiddleTick.Length = .07;
               scale.MinorTick.Background = Navy;
               scale.MinorTick.Length = .05;
               scale.Label.Location = ScaleObjectLocation.Outside;
               // scale.Label.ItemTemplate = _resources["GaugeLabel"] as DataTemplate;
               scale.Indicators.Add(BuildNeedle());
     
               return scale;
     
     
           }
     
           private Marker BuildMarker()
           {
               marker = new Marker();
               //marker.Style = _resources["LinearMarkerStyle"] as Style;
               marker.Value = Value;
               marker.Background = NeedleBackground;
               marker.IsAnimated = true;
               marker.Name = "marker";
               marker.Duration = new Duration(TimeSpan.FromSeconds(2));
               return marker;
           }
     
           public Marker marker;
           public Needle needle;
     
           private Needle BuildNeedle()
           {
               needle = new Needle();
               // needle.Style = _resources["CustomNeedle"] as Style;
               needle.Value = Value;
               needle.Background = NeedleBackground;
               needle.IsAnimated = true;
               needle.Name = "needle";
               needle.Duration = new Duration(TimeSpan.FromSeconds(2));
     
               return needle;
     
           }
     
           public SolidColorBrush Navy
           {
               get { return new SolidColorBrush(Color.FromArgb(255, 0, 0, 128)); }
           }
     
     
       }

    <gauge:Gauge x:Name="gauge" Grid.Row="1" Grid.Column="1" Height="300" Width="300" Min="0" Max="100" Value="90" GaugeType="Radial" NeedleBackground="Navy"/>
  5. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 28 Jun 2011 Link to this post

    Hi jason,

    If you want to see the needle animated on initialize, you need to use a timer or to call Dispatcher.BeginInvoke method. You can change your BuildNeedle method the following way:
    private Needle BuildNeedle()
    {
        needle = new Needle();
        // needle.Style = _resources["CustomNeedle"] as Style;
        needle.Background = NeedleBackground;
        needle.IsAnimated = true;
        needle.Name = "needle";
        needle.Duration = new Duration(TimeSpan.FromSeconds(2));
        this.Dispatcher.BeginInvoke(this.SetNeedleValue);
     
        return needle;
    }
     
    private void SetNeedleValue()
    {
        needle.Value = Value;
    }

    Kind 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
  6. jason
    jason avatar
    28 posts
    Member since:
    Oct 2010

    Posted 28 Jun 2011 Link to this post

    Thank you very much.  After seeing your fix I noticed I was setting the name after the value.
Back to Top
DevCraft banner