Change Needle Length

[Danny Anslinger]

Is it possible to change the needle length in a RadialGauge?  I see there is an option to allow custom needles, but haven't been able to locate any documentation on how to to actually create a customized needle.  

[Kannan R]

Hi Danny 

Thank you for contacting Syncfusion Support. 

RadialGauge control does not has direct option to customize the Length of Needle and it offers CustomRenderer support, that helps to customize the RadialGauge elements in all required aspect. We can customize the needle length by using CustomRenderer support. Please follow below steps to achieve this requirement.  

Step 1:  

Implement a custom control inherited from RadialGauge and implement property to define NeedleLength.  

Code Snippet : [C#] 

 

    /// <summary> 

    /// A class which derived from the RadialGauge control. 

    /// </summary> 

    public class AdvancedRadialGauge : RadialGauge 

    { 

        CustomRenderer custom; 

         

        /// <summary> 

        /// Constructor 

        /// </summary> 

        public AdvancedRadialGauge() 

        { 

            custom = new CustomRenderer(this); 

            this.Renderer = custom; 

        } 

 

        // Local variable which holding the length of the needle. 

        private int needleLength = 60; 

 

        /// <summary> 

        /// Gets or sets the NeedleLength value 

        /// </summary> 

        public int NeedleLength 

        { 

            get { return needleLength; } 

            set { needleLength = value; } 

        } 

    } 

 

 

Step 2:  

Need to implement the CustomRenderer class, then apply the NeedleLength property in DrawNeedle function and it will draw Needle based on this NeedleLength property. Please make use of below code snippet for your reference.  

Code Snippet : [C#] 

 

    /// <summary> 

    /// Custom renderer class 

    /// </summary> 

    public class CustomRenderer : IRadialGaugeRenderer 

    { 

 

        /// <summary> 

        /// Updates the renderer method. 

        /// </summary> 

        /// <param name="e"></param> 

        public void UpdateRenderer(PaintEventArgs e) 

        { 

            AdjustFontBounds(e.Graphics, RadialGauge.Font); 

            DrawOuterArc(e.Graphics, 135, 270, new Point(140, 140), 118); 

            // Draw Needle used to draw the Needle with the specified needle length 

            DrawNeedle(e.Graphics, 135, 270, m_RadialGauge.NeedleLength, 4, new Point(140, 140)); 

            DrawGaugeLabel(e.Graphics, new Point(140, 140), 118); 

            DrawTickMarks(e.Graphics, new System.Drawing.Drawing2D.GraphicsPath(), 121, 135, 270, 4, new Point(140, 140), 95); 

        } 

 

        public void DrawNeedle(Graphics graphics, Int32 m_GaugeArcStart, Int32 m_GaugeArcEnd, Int32 m_NeedleRadius, Int32 m_NeedleWidth, Point m_Center) 

        { 

            Single brushAngle = (Int32)(m_GaugeArcStart + (RadialGauge.Value - RadialGauge.MinimumValue) * m_GaugeArcEnd / (RadialGauge.MaximumValue - RadialGauge.MinimumValue)) % 360; 

            Double needleAngle = brushAngle * Math.PI / 180; 

            if (RadialGauge.ShowNeedle) 

            { 

                Point startPoint = new Point((Int32)(m_Center.X - m_NeedleRadius / 8 * Math.Cos(needleAngle)), 

                                            (Int32)(m_Center.Y - m_NeedleRadius / 8 * Math.Sin(needleAngle))); 

                Point endPoint = new Point((Int32)(m_Center.X + m_NeedleRadius * Math.Cos(needleAngle)), 

                                         (Int32)(m_Center.Y + m_NeedleRadius * Math.Sin(needleAngle))); 

                graphics.DrawLine(new Pen(this.RadialGauge.NeedleColor, 3), m_Center.X, m_Center.Y, endPoint.X, endPoint.Y); 

 

                graphics.FillEllipse(new SolidBrush(this.RadialGauge.NeedleColor), m_Center.X - m_NeedleWidth * 3, m_Center.Y - m_NeedleWidth * 3, m_NeedleWidth * 6, m_NeedleWidth * 6); 

            } 

        } 

} 

 

Please refer following sample and video for your reference. 

Sample: RadialGauge_Needle_Customization  

 

Video: RadialGauge_Video 

Please check the above solution and let us know if it is helpful. 

Regards 

Kannan 

[Danny Anslinger]

To implement a CustomRenderer for the RadialGauge to change just the needle length it seems I have to implement the entire CustomRenderer.  Which is basically redrawing the entire control, right?  Is there a way to only implement one aspect of the CustomRenderer?  If I'm having to do the drawing for the entire control, it sort of defeats the purpose of having a 3rd party control to use.

[Kannan R]

Hi Danny, 

 

Thank you for your update.  

 

At present there is no default support to achieve this requirement in RadialGauge and so, we have provided workaround using CustomRenderer support in RadialGauge. Based on your suggestion, we have considered “Provide support to customize Needle length in RadialGauge” as a feature request and it will be implemented in any of our upcoming release. We will let you know once it is implemented.  

 

Regards, 

Kannan