A NumberPicker Control

• Download demo project - 6.31 Kb
• Download source - 14.3 Kb

Introduction

A large number of applications nowadays contain some controls which are used for entering numbers. In particular, in financial applications, this kind of controls are used extensively. A number of other articles have discussed ways in which numbers can be represented more nicely in textbox controls. However, there is still a need for a control that allows the user to very quickly enter numbers. In this article, I will explain the NumberPicker control which will resolve this problem and allows for fast number entering.

This article is structured as follows. First, an explanation is given on the workings of this control and how it was implemented. Afterwards, I will go into the details of how the code can be incorporated in your current projects. Finally, some conclusive remarks are stated as well as the revision history.

Details of the control

This control provides a way in which numbers can be entered by clicking the digits on a dialog-based keypad, as you can see on the screenshot above. When the user double-clicks the control, a small numerical keypad is shown. This keypad allows you to enter numbers in the control. Furthermore, it contains some basic functionality to make simple mathematical calculations on the fly. The operators 'add', 'subtract', 'multiply' and 'divide' are supported. The mechanism to make the calculations is done with delegates.

private delegate double Function(double a, double b);
private Function f;

When one of these operators are clicked, the corresponding function is being held in a delegate f. In this case, the 'Add' operator was pressed.

this.f = new Function(Utilities.Add);

Afterwards, the result of applying the operator to the first entered value (temporary) and the last entered value (value) is calculated by invoking the function contained in the delegate on the two numbers. The result is saved into the temporary again, waiting for any following calculation.

this.temporary = f(this.temporary, Convert.ToDouble(this.value.Text));
this.value.Text = this.temporary.ToString();

The source for the NumberPicker control can be downloaded from the top of this article.

Using the code

Once we have successfully built the solution, the control can be used in other projects as well. This can be done by selecting "Add/Remove Items.." from the toolbox context menu and locating the "CustomControlLibrary.dll". Once the control is added to the toolbox, we can simply draw it on our forms and use it like any other control.

Textually, one could also write the following to use the control:

this.numberPicker = new CustomControlLibrary.NumberPicker();
this.numberPicker.Location = new System.Drawing.Point(0, 0);
this.numberPicker.MaxLength = 32767;
this.numberPicker.Modified = false;
this.numberPicker.Name = "myNumberPicker";
this.numberPicker.Size = new System.Drawing.Size(100, 20);

A small demo of the NumberPicker available for download from the top of this article.

Conclusions

The control that was described here can be used in applications that require fast number entering (e.g. financial applications). It provides a dialog-based keypad when double-clicking, and via simple mouse clicks, numbers can be entered in to the control.

As I have said in the introduction, other people have done work on representing numbers more nicely in a textbox. This control could very well be used with these other edit controls to obtain an even richer editing of numeric values (e.g. visualizing the numbers in red when they are negative, etc.).

History

• Dec 09, 2005 - Version 1.0.