Click here to Skip to main content
14,697,191 members
Articles » Desktop Development » Miscellaneous » General
Posted 23 Oct 2007


46 bookmarked

Next UI Knob Control

Rate me:
Please Sign up or sign in to vote.
3.42/5 (19 votes)
23 Feb 2009CPOL
A simple to use knob like control
Screenshot - knob1.jpg


Presentation layer is always the important aspect of a software. NextUI provides a list of unique controls in the hope that it is useful to anyone.


This control provides a Knob like panel that is easy to use and configure.

Using the Code

This control has a few properties to be configured:

Public propertyBackGrdColorSet the background color of the control, the color is used to paint the background as a linear gradient brush.
To fill a solid color, consider using an image
Public propertyBackImageUse this to set the background Image, for example,
you can set the background to solid color by setting this image to solid color image
Public propertyDisplayFontThe font that is used to display the label
Public propertyFontColorUse this to set the color of the font, the font is used to display the label
Public propertyKnobHandleImageTo set the image of the center handle
Public propertyLabelsIt returns a collection that allows a user to add a meterlabel.
Public propertyMarkingThis property is used to set the marking. Line will display a line as a marking using the color of the font . Cont will provide a color shade between 2 marking using the "color" property of MeterLabel. Both will display Line as well as the shade None will not display anything
Public propertyMarkingImageTypeThe type of label to display, if Image, the control will use the "Image" property of the MeterLabel class to display the label, if set to Font, the control will used the "Desc"
property to display the label, if None, nothing will displayed

MeterLabel class defines the property of each label:

Public propertyDescThis property is used for the actual text display for a label. You can set Desc to "Hello", but Value to 10, so this label will be displayed as Hello but the numerical 10 will be the actual representation of the label
Public propertyImageUsed to show an Image for the label
Public propertyMainColorThis is used to determine the color of the shade between the label
Public propertyValueValue is the actual numeric value of the label.
It is the actual value that will be raised when meter label is
used for control like knob. It is also the actual value that is used to
calculate the position of the pointer.

This control has a rotate event that will generate the value that this control is currently selecting:

Public eventRotateTo receive rotate event whenever a mouse is used to move the knob

Example 1

The code snippet below is extracted from the sample code, and will generate a control that looks like:

this.controlKnob1.BackImage = global::KnobDemo.Properties.Resources.Knob1;
this.controlKnob1.DisplayFont = new System.Drawing.Font("Courier New", 8F);
this.controlKnob1.FontColor = System.Drawing.Color.White;
this.controlKnob1.KnobHandleImage = null;
this.controlKnob1.Marking = NextUI.Bar.KnobPanel.Marking.BOTH;
this.controlKnob1.MarkingImageType = NextUI.Bar.KnobPanel.MarkingImage.FONT;
MeterLabel m1 = new MeterLabel(0, "0");
m1.MainColor = Color.LightYellow;
MeterLabel m2 = new MeterLabel(1, "1");
m2.MainColor = Color.LightSteelBlue;
MeterLabel m3 = new MeterLabel(2, "2");
m3.MainColor = Color.Green;
MeterLabel m4 = new MeterLabel(3, "3");
m4.MainColor = Color.Lavender;
MeterLabel m5 = new MeterLabel(4, "4");
m5.MainColor = Color.Khaki;
MeterLabel m6 = new MeterLabel(5, "5");

Example 2

The code snippet below is extracted from the sample code, and will generate a control that looks like the one below.
As you can see, if the Marking property is set to LINE, the control will not display the color shade:

this.controlKnob2.BackImage = global::KnobDemo.Properties.Resources.Knob1;
this.controlKnob2.DisplayFont = new System.Drawing.Font("Courier New", 8F);
this.controlKnob2.FontColor = System.Drawing.Color.White;
this.controlKnob2.KnobHandleImage = null;
this.controlKnob2.Location = new System.Drawing.Point(142, 30);
this.controlKnob2.Marking = NextUI.Bar.KnobPanel.Marking.LINE;
this.controlKnob2.MarkingImageType = NextUI.Bar.KnobPanel.MarkingImage.FONT;
MeterLabel m1 = new MeterLabel(0, "0");
m1.MainColor = Color.LightYellow;
MeterLabel m2 = new MeterLabel(1, "1");
m2.MainColor = Color.LightSteelBlue;
MeterLabel m3 = new MeterLabel(2, "2");
m3.MainColor = Color.Green;
MeterLabel m4 = new MeterLabel(3, "3");
m4.MainColor = Color.Lavender;
MeterLabel m5 = new MeterLabel(4, "4");
m5.MainColor = Color.Khaki;
MeterLabel m6 = new MeterLabel(5, "5");

Example 3

This example shows if the Marking Type is set to IMAGE, control will use the "Image" property
of MeterLabel control to display the label instead of "Desc":

this.controlKnob3.BackImage = global::KnobDemo.Properties.Resources.Knob1;
this.controlKnob3.DisplayFont = new System.Drawing.Font("Courier New", 8F);
this.controlKnob3.FontColor = System.Drawing.Color.White;
this.controlKnob3.KnobHandleImage = global::KnobDemo.Properties.Resources.Knob2;
this.controlKnob3.Marking = NextUI.Bar.KnobPanel.Marking.CONT;
this.controlKnob3.MarkingImageType = NextUI.Bar.KnobPanel.MarkingImage.IMAGE;
MeterLabel m11 = new MeterLabel(0, "0");
m11.Image = global::KnobDemo.Properties.Resources.themo3;
MeterLabel m21 = new MeterLabel(1, "1");
MeterLabel m31 = new MeterLabel(2, "2");
m31.Image =  global::KnobDemo.Properties.Resources.themo4;
MeterLabel m41 = new MeterLabel(3, "3");
MeterLabel m51 = new MeterLabel(4, "4");
m51.Image = global::KnobDemo.Properties.Resources.themo5;
MeterLabel m61 = new MeterLabel(5, "5");

Points of Interest

This control is still in development. If you have any cool enhancements that you would like to suggest, send me an email at


  • Initial beta release 0.9


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


About the Author

Software Developer (Senior)
United States United States
Senior Software Developer at nextwavesoft

Comments and Discussions

GeneralWind Direction!!!! Pin
rspercy6521-Jul-09 7:06
Memberrspercy6521-Jul-09 7:06 
GeneralDetent Pin
Brad Bruce24-Feb-09 11:30
MemberBrad Bruce24-Feb-09 11:30 
GeneralRe: Detent Pin
Steve-Low-NextwaveSoft24-Feb-09 20:32
MemberSteve-Low-NextwaveSoft24-Feb-09 20:32 
GeneralUnhandled Exception Pin
kevdelkevdel17-Jul-08 3:55
Memberkevdelkevdel17-Jul-08 3:55 
So Open the demo

Click on the little black circle in demo 1

With the mouse button down move the cursor away slowly to an area directly opposite the black circle

Eventually moving around like this with the mouse button down gives the following error

************** Exception Text **************
System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
   at System.Collections.CollectionBase.System.Collections.IList.get_Item(Int32 index)
   at NextUI.Collection.MeterLabelCollection.get_Item(Int32 index) in C:\Documents and Settings\sleong.low\Desktop\NextUIDemo\NextUIDemo\FunkyLibrary\Collection\MeterLabelCollection.cs:line 106
   at NextUI.Bar.KnobPanel.PointerToValue(Single angle) in C:\Documents and Settings\sleong.low\Desktop\NextUIDemo\NextUIDemo\FunkyLibrary\Bar\KnobPanel.cs:line 402
   at NextUI.Bar.KnobPanel.MouseMove(MouseEventArgs e) in C:\Documents and Settings\sleong.low\Desktop\NextUIDemo\NextUIDemo\FunkyLibrary\Bar\KnobPanel.cs:line 258
   at NextUI.Bar.ControlKnob.OnMouseMove(MouseEventArgs e) in C:\Documents and Settings\sleong.low\Desktop\NextUIDemo\NextUIDemo\FunkyLibrary\Bar\ControlKnob.cs:line 244
   at System.Windows.Forms.Control.WmMouseMove(Message& m)
   at System.Windows.Forms.Control.WndProc(Message& m)
   at System.Windows.Forms.ScrollableControl.WndProc(Message& m)
   at System.Windows.Forms.ContainerControl.WndProc(Message& m)
   at System.Windows.Forms.UserControl.WndProc(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
   at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
   at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

************** Loaded Assemblies **************
    Assembly Version:
    Win32 Version: 2.0.50727.3031 (netfxsp.050727-3000)
    CodeBase: file:///C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/mscorlib.dll
    Assembly Version:
    Win32 Version:
    CodeBase: file:///C:/Documents%20and%20Settings/kdelaney/Desktop/KnobDemo/KnobDemo/bin/Release/KnobDemo.exe
    Assembly Version:
    Win32 Version: 2.0.50727.3031 (netfxsp.050727-3000)
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Windows.Forms/
    Assembly Version:
    Win32 Version: 2.0.50727.3031 (netfxsp.050727-3000)
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System/
    Assembly Version:
    Win32 Version: 2.0.50727.3031 (netfxsp.050727-3000)
    CodeBase: file:///C:/WINDOWS/assembly/GAC_MSIL/System.Drawing/
    Assembly Version:
    Win32 Version:
    CodeBase: file:///C:/Documents%20and%20Settings/kdelaney/Desktop/KnobDemo/KnobDemo/bin/Release/FunkyLibrary.DLL

************** JIT Debugging **************
To enable just-in-time (JIT) debugging, the .config file for this
application or computer (machine.config) must have the
jitDebugging value set in the section.
The application must also be compiled with debugging

For example:

    < jitDebugging="true" />

When JIT debugging is enabled, any unhandled exception
will be sent to the JIT debugger registered on the computer
rather than be handled by this dialog box.

GeneralRe: Unhandled Exception Pin
canozurdo24-Feb-09 4:55
Membercanozurdo24-Feb-09 4:55 
GeneralRe: Unhandled Exception Pin
crewchill24-Jul-09 12:25
Membercrewchill24-Jul-09 12:25 
GeneralGood mouse action but graphics very grainy... Pin
Joe Sonderegger16-Jul-08 21:49
MemberJoe Sonderegger16-Jul-08 21:49 
GeneralImpressive UI Controls! Pin
chinsenglow24-Oct-07 18:34
Memberchinsenglow24-Oct-07 18:34 
Generalpretty cool controls Pin
thebeekeeper24-Oct-07 4:40
Memberthebeekeeper24-Oct-07 4:40 
GeneralRe: pretty cool controls Pin
Steve-Low-NextwaveSoft24-Oct-07 15:50
MemberSteve-Low-NextwaveSoft24-Oct-07 15:50 

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.