Introduction
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.
Background
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:
| Name | Description |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | BackGrdColor | Set 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 property](/KB/miscctrl/NextUIknob/pubproperty.gif) | BackImage | Use 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 property](/KB/miscctrl/NextUIknob/pubproperty.gif) | DisplayFont | The font that is used to display the label |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | FontColor | Use this to set the color of the font, the font is used to display the label |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | KnobHandleImage | To set the image of the center handle |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | Labels | It returns a collection that allows a user to add a meterlabel. |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | Marking | This 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 property](/KB/miscctrl/NextUIknob/pubproperty.gif) | MarkingImageType | The 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:
| Name | Description |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | Desc | This 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 property](/KB/miscctrl/NextUIknob/pubproperty.gif) | Image | Used to show an Image for the label |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | MainColor | This is used to determine the color of the shade between the label |
![Public property](/KB/miscctrl/NextUIknob/pubproperty.gif) | Value | Value 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:
| Name | Description |
![Public event](/KB/miscctrl/NextUIknob/pubevent.gif) | Rotate | To 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:
![](/KB/miscctrl/NextUIknob/sample.jpg)
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");
this.controlKnob1.Labels.Add(m1);
this.controlKnob1.Labels.Add(m2);
this.controlKnob1.Labels.Add(m3);
this.controlKnob1.Labels.Add(m4);
this.controlKnob1.Labels.Add(m5);
this.controlKnob1.Labels.Add(m6);
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:
![](/KB/miscctrl/NextUIknob/sample2.jpg)
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");
this.controlKnob2.Labels.Add(m1);
this.controlKnob2.Labels.Add(m2);
this.controlKnob2.Labels.Add(m3);
this.controlKnob2.Labels.Add(m4);
this.controlKnob2.Labels.Add(m5);
this.controlKnob2.Labels.Add(m6);
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
":
![](/KB/miscctrl/NextUIknob/sample3.jpg)
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");
this.controlKnob3.Labels.Add(m11);
this.controlKnob3.Labels.Add(m21);
this.controlKnob3.Labels.Add(m31);
this.controlKnob3.Labels.Add(m41);
this.controlKnob3.Labels.Add(m51);
this.controlKnob3.Labels.Add(m61);
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 sllow@nextwavesoft.com.
History