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