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

Tweet