top of page

Integer Input Control for Xojo


A simple Container Control with logic to allows you to get integer values from your users. Users can type in numbers or use the buttons to increment/decrement their selection.


The Integer Input Control, in dark mode and light mode.



This came about because I was looking for a more elegant way of getting integer values on a window than a regular text field. For the life of me, I can not ever get Validation Masks to work the way I'd expect, plus a regular text field is just not the most user-friendly way to enter numbers to begin with.

In the past, we've seen Number Pickers using a TextField and the UpDown controls, but these always rubbed me the wrong way. They're confusing to novice users, they invite misclicks even from experienced users, they prompt for typing (which isn't necessarily a bad thing, but it's not very user friendly), and can be pretty unclear. You can build one in Xojo fairly easily though, so they get used by default a lot. Well, that's where this comes in.

​• Get or Set the .Minimum, .Maximum properties for bounds.


• Get or Set the .Value property for the actual value your user has selected.


• Get or Set the .IncrementInterval property for how much you want the value to change for each button click.


• Get or set the .HoldSpeed property for how often the timer fires to add increments or decrements when you hold the mouse button. Default is that it fires every 250ms but you may wish to speed that up by lowering the value to 100-150.


• Get or Set the .AllowKeyboardInput property to block or allow the limited use of the keyboard to type in values.


• Call the .Inc or .Dec methods to increment or decrement the value manually by your .IncrementInterval.


• Call the .Refresh method to repaint the control, such as in the AppearanceChanged event when the user has switched dark/light modes.


The control will attempt to automatically resize itself to appropriately fit in the proportions you give it (this will reflect in the runtime but not the IDE). You'll find that some aspect ratios will look better than others. Experiment for your own use case, and adjust the logic in the source of the control's .Resized event handler to meet your needs if necessary.

I am releasing this control as open-source to the Xojo community.


Update History Version 1.1.0 - Improved typing logic

Version 1.0.0 - Initial Release

Comments


bottom of page