Introduction

In this article we are going to explore the controls inside Windows Phone 7 who are named NumericTextBox control. Later we will create a class library, which means we have to take a separate Windows Phone class library for which we can made that numeric TextBox. In this we have to learn how to make a user or custom control from Windows Phone 7. Those are controls in which we can add any type of functionality that we want and later you can use it as a control as well toolbox. Here we are making the numeric TextBox for which means whatever we enter inside the TextBox will be in numeric form, it will not have inserted a character value inside the TextBox. Further, whatever library we have made it's reference such as the .dll file will be added inside the other Windows Phone application at which we want to use that control and you should have to add a library project inside the Windows Phone application project. Now it's time to proceed learning something new so have a look on the steps given below and which will be helpful for such a type of implementation.

Step 1 : In this step we have to create a Windows Phone library so let's see from where you have to add it which is given in the figure.

• Go to Visual Studio 2010
• Open New->Project
• Select the template silverlight for Windows Phone
• Select the Windows Phone library and give it a name such as WPControls as I give
• Click OK

Next-> select the Windows Phone library.

Step 2 : In this step we will see the code for the Windows Phone library so let's have a look on the code given below.

Code : This code will be written inside the NumericTextBox.cs file

using System;
using System.Windows.Controls;
using System.Windows.Input;
namespace WPControls
{
public class NumTxtBox: TextBox
{
private readonly Key[] num = 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 NumTxtBox()
{
this.InputScope = new InputScope();
this.InputScope.Names.Add(new InputScopeName() { NameValue = InputScopeNameValue.TelephoneLocalNumber });
}
protected override void OnKeyDown(KeyEventArgs e)
{
if(Array.IndexOf(num,e.Key) == -1)
{
e.Handled = true;
}
base.OnKeyDown(e);
}
}
}

Step 3 : In this step you have to build the class library for which you have to click on the build project; it will be built succesfully as well.

Step 4 : Now you have to take another application which is a Windows Phone application.

• Start another instance of Visual Studio 2010
• Go to Menu->File->New->Project
• Select the Silverlight template for Windows Phone
• Select the Windows Phone application
• Click OK

Step 5 : In this step you will have to add the reference of the phone class library which was created; let us see from where you have to add this which is shown in the figure.

Add the reference of the dll file which will be created and see how it will added which is shown in the figure given below.

Step 6 : In this step we have to add the complete phone library project to the Windows Phone application project; let us see how you will add it.

• Go to Solution Explorer
• Right-click and select existing project
• Select the Class library cs file and add it
• You will see that the entire library project will be added to the Windows Phone application project

Add the existing project on click to add it shows which project select existing project.

Select the WPControls.cs file; let us see how it will added which is shown in the figure.

Step 7 : In this step you will see that the project has been added to your Windows Phone application project which you can see in the figure given below:

Step 8 : In this step you will just see that the control named numeric textbox has been added to the toolbox which you can see in the figure given below you can drag and drop that control to use it.

Step 9 : In this step you just see the code for the MainPage.xaml.cs file which is given below.

Code :

using System;
using System.Windows.Input;
using Microsoft.Phone.Controls;
namespace WPNumericTextBox
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
// allowed keys
private readonly Key[] num = new Key[] {Key.Back, Key.NumPad0, Key.NumPad1, Key.NumPad2, Key.NumPad3, Key.NumPad4,
Key.NumPad5, Key.NumPad6, Key.NumPad7, Key.NumPad8, Key.NumPad9 };
private void STxtbox_KeyDown(object sender, KeyEventArgs e)
{
if (Array.IndexOf(num, e.Key) == -1)
{
e.Handled = true;
}
}
private void Button2_Click(object sender, System.Windows.RoutedEventArgs e)
{
txtbres.Text = string.Format("Numeric textbox 1 value is : {1}{0}Numeric textbox 2 value is : {2}{0}",
Environment.NewLine,STxtbox.Text,NumTxtboxUC.Text);
}
private void Button2_Click(object sender, System.Windows.RoutedEventArgs e)
{
txtbres.Text = STxtbox.Text = NumTxtboxUC.Text = string.Empty;
}
}
}

Step 10 : In this step you will see the code for the MainPage.xaml file which is given below: