I wanted to make a simple application for Windows Phone 7 that required a number of TextBox controls to only accept numeric input. Some would be able to take decimals, and others would not.
Sounds easy correct? It really isn’t as straight-forward as I would want it to be, or as easy as it is in ASP or Windows Forms programming or WPF.
The reason it is not as easy you think it would be is that the framework for Windows Phone 7 does not, at this time contain a way of the developers to distinguish between the special keys (the ones you get on a normal keyboard using the Shift key) and the numbers that would, on a normal keyboard, be under them. I think that, at some level, they are using the same code and passing a Shift key identifier to the control so that it knows what character to produce, but at the level we access it, there does not seem to be anyway to determine the use of that unseen Shift key.
What this does is that if you trap for the #, you will also trap and stop the entry of the number 3. This has caused developers some difficulty when trying to control the user entries.
There is a way to do it though. It is actually pretty easy, there are a few steps and I have demonstrated them below.
Step 1 – Choose the correct InputScope
The one that I found that worked the best was the Telephone InputScope. This one had all the digits and the least number of extra keys that we will have to block. It also does not have any button that would allow the user to go to another InputScope.
I made a simple method that I could then call once for each of the TextBox controls I wanted to restrict input to numbers only:
Then I called each one for the applicable TextBox controls:
Now when I run the application, and set focus to one of the text boxes, I get the numeric InputScope panel I want:
Step 2 – Handle Invalid Characters
The only problem with this InputScope is that there are a few invalid characters for a numeric control. The obvious ones are the “*“; “+” (hold the 0 key); “,” and the “#“. There are also some keys that are not obvious at first. These appear when you hold down the decimal “.” key:
You are then presented with four more keys that are invalid for a numeric TextBox: “(“; “)“; “x“; and “-“.
In order to trap and mask the TextBox control from these keys we need a method that will allow for the invalid characters to be removed. Since we already know about the PlatformKeyCode’s inability to distinguish between certain keys and their decimal equivalents, we have to do it on the KeyUp event instead of the KeyDown event.
We also have to take into account that for some fields we want to allow decimals, but for others, we want numbers only. In order to solve both problems with the least amount of code, we create a method that will be called by event handler methods:
Now, as mentioned before, we need to create handler methods to call this method that removes the invalid characters from the TextBox control:
Step 3 – Call the Code from the Controls
Now, all that is left is to set the handlers to the correct controls and we are done!
First, for controls that are NUMBERS ONLY, no decimals, the process is easy, simply call the appropriate event handler (in this case, numericOnlyTextBox_KeyUp) from the KeyUp event:
This will ensure that there are no decimals ever seen as the decimals are placed into the array holding the invalid characters and removed when found.
The only problem I found was that when I allowed decimals to be entered into the TextBox control, the user could add as many as they wanted. This made the numbers invalid and could cause errors in my code, so I had to create a method that would be called on the KeyDown event for TextBox controls that accepted decimals:
With TextBox controls that you want to allow a decimal in, you will have to call both this KeyDown event handler and a different KeyUp event handler:
Now, we have it! A quick and flexible way to handle numeric entry into TextBox controls.
Hope this helps,