Click here to Skip to main content
15,886,806 members
Articles / Programming Languages / C#
Tip/Trick

C# Knob Control using Windows Forms

Rate me:
Please Sign up or sign in to vote.
4.84/5 (35 votes)
11 Dec 2019CPOL3 min read 54.5K   7.3K   87   17
Yet another Knob Control in C#

Image 1

Introduction

This code was originally written by Jigar Desai a long time ago as a proof of concept. (The original article for this control can be found on C-SharpCorner.com.)

I needed a knob control in C#, with full functionalities for my personal projects and decided to improve it by making its output type a class library and adding as many properties as possible to be a full and flexible control.

  • The control accepts now graduations with text and sub graduations.
  • The text of the graduations can be drawn inside or outside the knob.
  • The "start angle" and the "end angle" of the graduations are adjustable.
    C#
    // "start angle" and "end angle" possible values:
    
    // 90 = bottom (minimum value for "start angle")
    // 180 = left
    // 270 = top
    // 360 = right
    // 450 = bottom again (maximum value for "end angle")
    
    // So the couple (90, 450) will give an entire circle 
    // and the couple (180, 360) will give half a circle.
  • The MouseWheel event is now managed.

Tip: You might have noticed that a UserControl doesn't show the MouseWheel event in the Properties window. Hint of trouble there. The WM_MOUSEWHEEL message bubbles. If the control that has the focus doesn't handle it, then Windows passes it on to its Parent. Repeatedly, until it finds a parent window that wants to handle it.

HandledMouseEventArgs lets you stop the bubbling.

C#
protected override void OnMouseWheel(MouseEventArgs e)
{           
    base.OnMouseWheel(e);

    if ( isFocused && isKnobRotating && 
    Utility.isPointinRectangle(new Point(e.X, e.Y), rKnob))
    {                
        // the Delta value is always 120, as explained in MSDN
        int v = (e.Delta / 120) * (_maximum - _minimum) / _mouseWheelBarPartitions;
        SetProperValue(Value + v);

        // Avoid to send MouseWheel event to the parent container
        ((HandledMouseEventArgs)e).Handled = true;
    }
}

Properties

Parameter Signification
Values  
Value Gets or sets the value of the Knob
_minimum (int, 0) Gets or sets the lower limit of the range of values
_maximum (int, 100) Gets or sets the upper limit of the range of values
_LargeChange (int) Gets or sets a value to be added to or subtracted to the Value property when the change is made with the mouse.
_SmallChange (int) Gets or sets a value to be added to or subtracted to the Value property when the change is made with the keyboard.
_mouseWheelBarPartitions Sets how many parts are bar divided when using mouse wheel
Appearance  
_showLargeScale (bool) Displays or hides the main tick marks
_showSmallScale (bool) Displays or hides intermediate tick marks
KnobPointerStyles (enum) Sets the style of the knob pointer: a circle or a line
_startAngle Sets the start angle to display graduations (default 135, min 90)
_endAngle Sets the end angle to display graduations (default 405, max 450)
Ticks  
_scaleDivisions (int) Sets the number of intervals between minimum and maximum
_scaleSubDivisions (int) Sets the number of subdivisions between main tick marks
_drawDivInside (bool) Draws graduation strings inside or outside the knob circle
Colors  
_scaleColor (Color) Color of the tick marks
_knobBackColor (Color) backcolor of the knob (default LightGray)
_PointerColor (Color) backcolor of the pointer (default SlateBlue)
Font  
_scaleFont (Font) Sets the Font (see _scaleFontAutoSize for the size)
_scaleFontAutoSize (bool) if true, the font size is calculated automatically, otherwise it is the selected size

The single event managed by this control is the ValueChanged event.

C++
private void knobControl1_ValueChanged(object Sender)
{
     label1.Text = knobControl1.Value.ToString();
}

This project was developed with Visual Studio version 2017.

The code is not difficult to understand and to modify to suit your needs. The main difficulty is that you need some Math skills to understand how all is displayed (not so much in fact: sinus and cosinus level required :-)).

You can download the demo project to see the KnobControl in action or simply the source of the KnobControl.

History

  • 11th December, 2019: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
France France
Architect/engineer

Comments and Discussions

 
QuestionAdd an image to the knob? Pin
ghindmon24-May-23 4:17
ghindmon24-May-23 4:17 
QuestionClicking twice to turn knob Pin
Member 1490573231-Aug-20 8:49
Member 1490573231-Aug-20 8:49 
Questionknob min max jump Pin
Member 129406169-Jan-20 2:37
Member 129406169-Jan-20 2:37 
AnswerRe: knob min max jump Pin
Fabrice Lacharme10-Feb-20 2:00
Fabrice Lacharme10-Feb-20 2:00 
Questionthe knob's aspect ratio is stuck as 1:1 Pin
Member 1415163318-Feb-19 8:06
Member 1415163318-Feb-19 8:06 
QuestionError when using knob control in Visual Studio 2017 Pin
Member 1293684729-Jan-19 15:17
Member 1293684729-Jan-19 15:17 
GeneralMy vote of 5 Pin
tbayart31-Aug-18 3:26
professionaltbayart31-Aug-18 3:26 
GeneralRe: My vote of 5 Pin
Fabrice Lacharme1-Sep-18 7:47
Fabrice Lacharme1-Sep-18 7:47 
QuestionLicence missmatch Pin
DamianDixon30-Aug-18 21:59
DamianDixon30-Aug-18 21:59 
QuestionGood Pin
Yves23-Aug-18 9:37
Yves23-Aug-18 9:37 
AnswerRe: Good Pin
Fabrice Lacharme24-Aug-18 23:34
Fabrice Lacharme24-Aug-18 23:34 
QuestionThe true test... Pin
littleGreenDude22-Aug-18 4:30
littleGreenDude22-Aug-18 4:30 
GeneralMy vote of 5 Pin
LightTempler22-Aug-18 3:20
LightTempler22-Aug-18 3:20 
BugNegative Minimum Doesn't work Pin
Member 419136627-Jul-18 3:16
Member 419136627-Jul-18 3:16 
GeneralRe: Negative Minimum Doesn't work Pin
Fabrice Lacharme21-Aug-18 21:18
Fabrice Lacharme21-Aug-18 21:18 
QuestionScale Font Pin
हर्ष वर्द्धन27-May-18 5:00
हर्ष वर्द्धन27-May-18 5:00 
AnswerRe: Scale Font Pin
Fabrice Lacharme28-May-18 22:07
Fabrice Lacharme28-May-18 22:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.