Saturday 11 February 2012

Creating a numeric left/right control

Why create a numeric left/right control?

A numeric up/down control, also called a spinbox, is used where properties of a form can be set over a continuous range between two extremes. This could be things like month of the year, where the month can only be an integer between 1 and 12.

In Windows Forms, this control looks like a text box with two tiny little arrows to increase or decrease the number.

NumericUpDown






It has several useful features when it has the focus. This includes being able to increase or decrease the numbers by pressing the up and down keys on the keyboard, or using the scroll wheel on the mouse to rapidly change it.

The problem is when it is being used to represent information that is horizontally aligned. Let's say you have a row of objects, and you want to use the spinbox to select which object is selected. Using up and down keys will confuse people. In my case, I needed to page through screens of time series data. A time series is a very long series of data, where the x-axis is time, and is almost always horizontally aligned. This is why I need the buttons to be pointing left and right.

What would be great is if the NumericUpDown control had a property you can toggle, which would just put the buttons on the left and right of the text box! This would save a lot of hastle. Unfortunately, as the name suggests, this is not possible. So I decided to create my own re-usable control that I can place on forms.

Creating a numeric left/right control

Create a new Visual C# project in Visual Studio. Then create a new user control.

Create new user control

I called the control NumericLeftRight. A grey canvas appears for you to create your control. Drop a NumericUpDown and two Button controls onto the canvas and arrange them either side of the NumericUpDown. Unfortunately, there is no way to turn off the up and down buttons on the NumericUpDown, so you will have to cover the up and down buttons with the right button. Change the text in the buttons to angle brackets to represent left and right operation.

Laying out the controls

Double click on the buttons to create click handers for them. In the click handlers, call the NumericUpDown.UpButton() and NumericUpDown.DownButton() methods. Also, expose the NumericUpDown control through a property. This is so that you can set the NumericUpDown control's settings , such as maximum and minimum, in the initialisation code for the form you drop it onto.

Click handlers and exposed NumericUpDown property

Compile your project and you are ready to add it to your form. Go back to the form designer and open the toolbox. You should see the user control for the NumericLeftRight available to drop onto the form.

The control appears in the toolbox

Drag the NumericLeftRight onto the form. Everything should be ready to go! Compile and launch the program and test that the buttons do increment and decrement the number in the NumericUpDown. In the properties window, the NumericUpDown property that I exposed can be seen in the Misc category at the bottom. You can expand it to see all the internal properties. However, you cannot set these properties here and have them applied at runtime. The designer does not apply these changes permanently for some reason. You need to go into the Form1.Designer.cs code directly and add the values to the properties manually.

Manually set the properties in the designer generated code
Hopefully, this should be everything you need to do in order to create a usable NumericLeftRight control. Compile and run, then spin away!

Using the form