There is no “built in†numeric textbox in the current Silverlight for Windows phone.
Here a few solutions to realize one anyway : it remembers me the early years of the .NET framework or nothing was in the framework …
All my solutions are based on the same principle : we handle the keydown event of a textbox then we check the code of the pressed key.
If the code matches a number, we let it do, in the other case we stop the process.
First solution :Â A simple textbox
In the xaml of the application, we add a textbox and we set it’s InputScrope property to “TelephoneNumber†to set the keyboard to a layout with numbers (we should also use the “Number†value for this property but the keys are smaller, this is not the best for a small device) so the input keyboard will look like this
This is not enough, because we can use the special characters (*, #, ., / and the space bar).
So we add an handler for the keydown event
<TextBox Name="SimpleTbx" InputScope="TelephoneNumber" KeyDown="SimpleTbx_KeyDown"/>
In the code behind, we will add our logic:
First, we specify an array of the allowed key codes :
private readonly Key[] numeric = new Key[] {Key.Back, Key.NumPad0, Key.NumPad1, Key.NumPad2, Key.NumPad3, Key.NumPad4, Key.NumPad5, Key.NumPad6, Key.NumPad7, Key.NumPad8, Key.NumPad9 };
(don’t forget the back button because we still want to use it ! It works also if I don’t put it in the array but I prefer to let it just in case)
In the keydown event handler we check the pressed key code:
private void SimpleTbx_KeyDown(object sender, KeyEventArgs e) { // handles non numeric if (Array.IndexOf(numeric, e.Key) == -1) { e.Handled = true; } }
If the array don’t contains the code we stop to process the key.
That’s it for the first solution.
Second solution : create an user control
If we don’t want to repeat the operations of the first solution on every textbox in the project we can use a user control.
So we add an user control to the project (right click on the project-> Add –> new item)
In this user control we add a textbox and we repeat exactly the same operations than for the first solution.
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Height="Auto" Width="Auto"> <TextBox Name="NumericTextBox" KeyDown="NumericTextBox_KeyDown" InputScope="TelephoneNumber"/> </Grid>
We still have a little additional work to do : add a property linked to the text of the textbox. So we can retrieve the result in our page.
public string Text { get { return NumericTextBox.Text; } set { NumericTextBox.Text = value; } }
To use it in the mainpage, we need to reference the namespace of the usercontrol:
xmlns:my="clr-namespace:WPNumericTextBox.Controls"
then we can use it this way :
<my:NumericTextBoxUserControl x:Name="NumericTbxUC" />
End of the second solution.
Third solution : inherit the textbox to create a numeric textbox
We can inherit the textbox and made it responsive to numbers only:
- Add a class to your project
- Inherit from textbox
- Set the InputScope to InputScopeNameValue.TelephoneLocalNumber
- Override the keydown event
- That’s it .
Here is the complete code :
using System; using System.Windows.Controls; using System.Windows.Input; namespace WPNumericTextBox.Controls { public class NumericTextBox : TextBox { private readonly Key[] numeric = new Key[] {Key.Back, Key.NumPad0, Key.NumPad1, Key.NumPad2, Key.NumPad3, Key.NumPad4, Key.NumPad5, Key.NumPad6, Key.NumPad7, Key.NumPad8, Key.NumPad9 }; public NumericTextBox() { this.InputScope = new InputScope(); this.InputScope.Names.Add(new InputScopeName() { NameValue = InputScopeNameValue.TelephoneLocalNumber }); } protected override void OnKeyDown(KeyEventArgs e) { if(Array.IndexOf(numeric,e.Key) == -1) { e.Handled = true; } base.OnKeyDown(e); // important, if not called the back button is not handled } } }
do not forgot to call the base.OnKeyDown method, otherwise your back button will be inefficient.
To use it in the mainpage : reference the namespace of the usercontrol:
xmlns:my="clr-namespace:WPNumericTextBox.Controls"
then use the control :
<my:NumericTextBox x:Name="NumTbx"/>
Fourth Solution : create a numeric textbox in a control library
This solution is an improvement of the third : we add our control in a windows phone library so we can reuse it for another project !
To use it in the mainpage : reference the namespace of the usercontrol:
xmlns:my1="clr-namespace:WPControls;assembly=WPControls"
then use the control :
<my1:NumericTextBox Name="NumericTextBox"/>
I created a demo app :
The full demo source is available for download :
http://www.sambeauvois.be/Demos/WP7/NumericTextBox/WPNumericTextBox.zip
Incoming search terms:
- windows phone numeric textbox
- textbox7
- numeric keypad windows phone 8
- windows phone textbox numbers only
- number textbox wp7
- check the textbox is not empty windows phone 7
- windows phone 7 textbox numbers only
- numerictextbox
- windows phone numeric keyboard
- key_numpad58