We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to modify the needle length of the WinForms RadialGauge?

Platform: WinForms |
Control: RadialGauge |
Published Date: September 4, 2018 |
Last Revised Date: January 7, 2020

Modify the needle length

At present there is no direct option to customize the Needle Length in RadialGauge control and it is possible to modify the length of the needle using CustomRenderer support, which helps to customize all the elements appearance in RadialGauge. The following steps will guide to achieve this requirement.

 

Step 1: Create a Custom control derived from the RadialGauge and implement property to customize the Needle Length.

 

For example, Here implemented a property named NeedleLength, to customize the NeedleLength.

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; }
  }
}

VB

''' <summary>
''' A class which derived from the RadialGauge control.
''' </summary>
Public Class AdvancedRadialGauge
   Inherits RadialGauge
   Private custom As CustomRenderer
   ''' <summary>
   ''' Constructor
   ''' </summary>
   Public Sub New()
      custom = New CustomRenderer(Me)
      Me.Renderer = custom
   End Sub
   ' Local variable which holding the length of the needle.
   Private needleLength_Renamed As Integer = 60
   ''' <summary>
   ''' Gets or sets the NeedleLength value
   ''' </summary>
   Public Property NeedleLength() As Integer
     Get
       Return needleLength_Renamed
     End Get
     Set(ByVal value As Integer)
       needleLength_Renamed = value
     End Set
     End Property
End Class

 

Step 2: Create Custom Renderer class derived from the IRadialGaugeRanderer and this class will help to custom draw RadialGauge control. In this class, Needle drawn using function named DrawNeedle and here Needle Length is customized.

C#

/// <summary>
/// Custom renderer class
/// </summary>
public class CustomRenderer : IRadialGaugeRenderer
{
   #region Varaibles
   /// </summary>
   /// Gets the radial gauge
   /// </summary>
   private AdvancedRadialGauge m_RadialGauge;
   /// <summary>
   /// Used to set bounds for the Font
   /// </summary>
   Single fontBoundY1, fontBoundY2;
   #endregion
 
   #region Properties
   /// <summary>
   /// Gets the Radial gauge
   /// </summary>
   internal AdvancedRadialGauge RadialGauge
   {
      get
      {
         return m_RadialGauge;
      }
   }
   #endregion
 
   #region Constructor
   /// <summary>
   /// Constructor of the Renderer class
   /// </summary>
   /// <param name="radialGauge"></param>
   public CustomRenderer(AdvancedRadialGauge radialGauge)
   {
      m_RadialGauge = radialGauge;  
   }
   #endregion
 
   #region IRadialGaugeRenderer Members
   /// <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);
      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);
   }
   /// <summary>
   /// Method used to draw needle
   /// </summary>
   /// <param name="graphics">Graphics</param>
   /// <param name="m_GaugeArcStart">Arc start position</param>
   /// <param name="m_GaugeArcEnd">Arc end position</param>
   /// <param name="m_NeedleRadius">Needle radius</param>
   /// <param name="m_NeedleLength">Needle width</param>
   /// <param name="m_Center">Center point of the gauge</param>
   public void DrawNeedle(Graphics graphics, Int32 m_GaugeArcStart, Int32 m_GaugeArcEnd, Int32 m_NeedleRadius, Int32 m_NeedleLength, 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_NeedleLength * 3, m_Center.Y - m_NeedleLength * 3, m_NeedleLength * 6, m_NeedleLength * 6);
      }
   }
}

VB

''' <summary>
''' Custom renderer class
''' </summary>
Public Class CustomRenderer
    Implements IRadialGaugeRenderer
 
    #Region "Varaibles"
    ''' </summary>
    ''' Gets the radial gauge
    ''' </summary>
    Private m_RadialGauge As AdvancedRadialGauge
    ''' <summary>
    ''' Used to set bounds for the Font
    ''' </summary>
    Private fontBoundY1, fontBoundY2 As Single
    #End Region
 
    #Region "Properties"
    ''' <summary>
    ''' Gets the Radial gauge
    ''' </summary>
    Friend ReadOnly Property RadialGauge() As AdvancedRadialGauge
      Get
        Return m_RadialGauge
      End Get
    End Property
    #End Region
 
    #Region "Constructor"
    ''' <summary>
    ''' Constructor of the Renderer class
    ''' </summary>
    ''' <param name="radialGauge"></param>
    Public Sub New(ByVal radialGauge As AdvancedRadialGauge)
      m_RadialGauge = radialGauge
    End Sub
    #End Region
 
    #Region "IRadialGaugeRenderer Members"
    ''' <summary>
    ''' Updates the renderer method.
    ''' </summary>
    ''' <param name="e"></param>
    Public Sub UpdateRenderer(ByVal e As PaintEventArgs)
      AdjustFontBounds(e.Graphics, RadialGauge.Font)
      DrawOuterArc(e.Graphics, 135, 270, New Point(140, 140), 118)
      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)
    End Sub
    ''' <summary>
    ''' Method used to draw needle
    ''' </summary>
    ''' <param name="graphics">Graphics</param>
    ''' <param name="m_GaugeArcStart">Arc start position</param>
    ''' <param name="m_GaugeArcEnd">Arc end position</param>
    ''' <param name="m_NeedleRadius">Needle radius</param>
    ''' <param name="m_NeedleLength">Needle width</param>
    ''' <param name="m_Center">Center point of the gauge</param>
    Public Sub DrawNeedle(ByVal graphics As Graphics, ByVal m_GaugeArcStart As Int32, ByVal m_GaugeArcEnd As Int32, ByVal m_NeedleRadius As Int32, ByVal m_NeedleLength As Int32, ByVal m_Center As Point)
      Dim brushAngle As Single = CInt(Math.Truncate(m_GaugeArcStart + (RadialGauge.Value - RadialGauge.MinimumValue) * m_GaugeArcEnd / (RadialGauge.MaximumValue - RadialGauge.MinimumValue))) Mod 360
      Dim needleAngle As Double = brushAngle * Math.PI / 180
      If RadialGauge.ShowNeedle Then
        Dim startPoint As New Point(CInt(Math.Truncate(m_Center.X - m_NeedleRadius / 8 * Math.Cos(needleAngle))), CInt(Math.Truncate(m_Center.Y - m_NeedleRadius / 8 * Math.Sin(needleAngle))))
        Dim endPoint As New Point(CInt(Math.Truncate(m_Center.X + m_NeedleRadius * Math.Cos(needleAngle))), CInt(Math.Truncate(m_Center.Y + m_NeedleRadius * Math.Sin(needleAngle))))
        graphics.DrawLine(New Pen(Me.RadialGauge.NeedleColor, 3), m_Center.X, m_Center.Y, endPoint.X, endPoint.Y)
        graphics.FillEllipse(New SolidBrush(Me.RadialGauge.NeedleColor), m_Center.X - m_NeedleLength * 3, m_Center.Y - m_ NeedleLength * 3, m_NeedleLength * 6, m_NeedleLength * 6)
      End If
   End Sub
End Class

 

Step 3: Here we are applying NeedleLength in customized RadialGauge.

 

MainForm.cs

C#

public partial class Form1 : MetroForm
{
   #region Constructor
   public Form1()
   {
      InitializeComponent();
      this.advancedRadialGauge1.NeedleLength = 100;
      this.trackBarEx2.ValueChanged += new EventHandler(trackBarEx2_ValueChanged);
      this.advancedRadialGauge1.NeedleStyle = Syncfusion.Windows.Forms.Gauge.NeedleStyle.Pointer;
   }
   void trackBarEx2_ValueChanged(object sender, EventArgs e)
   {
      this.advancedRadialGauge1.NeedleLength = (sender as TrackBarEx).Value;
      this.advancedRadialGauge1.Invalidate();
   }
   private void trackBarEx1_ValueChanged(object sender, EventArgs e)
   {
      this.advancedRadialGauge1.Value = (sender as TrackBarEx).Value;
   }
   #endregion
}

VB

Partial Public Class Form1
    Inherits MetroForm
    #Region "Constructor"
    Public Sub New()
       InitializeComponent()
       Me.advancedRadialGauge1.NeedleLength = 100
       AddHandler trackBarEx2.ValueChanged, AddressOf trackBarEx2_ValueChanged
         Me.advancedRadialGauge1.NeedleStyle = Syncfusion.Windows.Forms.Gauge.NeedleStyle.Pointer
       End Sub
       Private Sub trackBarEx2_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)
         Me.advancedRadialGauge1.NeedleLength = (TryCast(sender, TrackBarEx)).Value
         Me.advancedRadialGauge1.Invalidate()
       End Sub
       Private Sub trackBarEx1_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) Handles trackBarEx1.ValueChanged
         Me.advancedRadialGauge1.Value = (TryCast(sender, TrackBarEx)).Value
       End Sub
    #End Region
End Class

 

Show the needle length of radial gauge

 

Samples:

C#: RadialGauge_Needle_Customization_C#

VB: RadialGauge_Needle_Customization_VB

Reference link: https://help.syncfusion.com/windowsforms/radial-gauge/radial-gauge#custom-renderer

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile