How to Implement the InputScope For TextBox in Windows Phone Application

Introduction

In this small article we will implement the InputScope in Windows Phone Applications using XAML code as well as C#.

Procedures

Step 1: Create a new "Silverlight Windows Phone Application" in Visual Studio and name it as you choose (I here named it InputScope).

Now a new Windows Phone Application Page (MainPage.xaml) will be generated.

Add a Pivot Control and two Pivot Items to it. You can do this using Expression Blend as well as by using simple XAML code.

I here did it with XAML.

Your XAML code will look like this.

<controls:Pivot Margin="8,8,0,8" Title="Using">

<controls:PivotItem Header="Xaml">

</Grid>

<controls:PivotItem Header="C#">

</Grid>

</grid>

Now let the first Pivot Item for implementing the InputScope by using the XAML code.

Add three TextBox controls and three TextBlocks with the text “Address Type”, ”Phone No. Type” and “URL Type” respectively for each TextBox Control to your project.
(Name them as you want or leave it as it is).

Similarly, for the second Pivot Item, let it show the implementation of InputScope using the C# code.

Add a TextBox control and four RadioButton controls to your project.

(Name them as you want or leave it as it is.)

The MainPage will look like this:

Step 2: Now go to the MainPage.xaml file and add the following code for each TextBox in the first Pivot Item, like:

<textbox height="72" horizontalalignment="Right" margin="0,34,11,0" name="textBoxName"

text="" verticalalignment="Top" width="264">

<TextBox.InputScope>

</InputScope>

</TextBox.InputScope>

</textbox>

<textblock height="30" horizontalalignment="Left" margin="23,52,0,0" name="textBlock1"

text="Address Type :" verticalalignment="Top" />

Now do a similar add for each TextBox in the first Pivot item.

Finally Your XAML will look like this:

<controls:Pivot Margin="8,8,0,8" Title="Using">

<controls:PivotItem Header="Xaml">

<TextBox.InputScope>

</InputScope>

</TextBox.InputScope>

</TextBox>

<TextBox.InputScope>

</InputScope>

</TextBox.InputScope>

</TextBox>

<TextBox.InputScope>

</InputScope>

</TextBox.InputScope>

</TextBox>

</Grid>

</controls:PivotItem>

<controls:PivotItem Header="C#">

</Grid>

</controls:PivotItem>

</controls:Pivot>

</Grid>

Step 3: Now the XAML part is over, its time to implement the same with C#.

Navigate to the cs File MainPage.xaml.cs and add the following code:

//MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

//Initially as the Page is Loaded the Address Radio Button

// Is Checked

radioButtonAddress.IsChecked = true;

//Calling The myInputeScope() Method

myInputScope();

}

public void myInputScope()

{

//Creating the reference of InputScope type

InputScope inputscope = new InputScope();

//Creating the reference of InputScopeName

InputScopeName name = new InputScopeName();

//Whether the Adress Radio Button Is Checked or Not

if (radioButtonAddress.IsChecked == true)

{

//Initialising the InputScope of AddressCity in NameValue property of InputScopeName reference

name.NameValue = InputScopeNameValue.AddressCity;

inputscope.Names.Add(name);

//Initialising the TextBox with the InputScope

textBoxInputScope.InputScope = inputscope;

}

else if (radioButtonPhone.IsChecked == true)

{

name.NameValue = InputScopeNameValue.TelephoneLocalNumber;

inputscope.Names.Add(name);

textBoxInputScope.InputScope = inputscope;

}

else if (radioButtonDigits.IsChecked == true)

{

name.NameValue = InputScopeNameValue.Digits;

inputscope.Names.Add(name);

textBoxInputScope.InputScope = inputscope;

}

else if (radioButtonChat.IsChecked == true)

{

name.NameValue = InputScopeNameValue.Chat;

inputscope.Names.Add(name);

textBoxInputScope.InputScope = inputscope;

}

//Calling the myInputScoe() method on Every radioButton Change Event

private void radioButtonAddress_Checked(object sender, RoutedEventArgs e)

{

myInputScope();

}

private void radioButtonPhone_Checked(object sender, RoutedEventArgs e)

{

myInputScope();

}

private void radioButtonDigits_Checked(object sender, RoutedEventArgs e)

{

myInputScope();

}

private void radioButtonChat_Checked(object sender, RoutedEventArgs e)

{

myInputScope();

}

Here in this code initially as the page is loaded we are calling the myInputScope() method that is the main working part of the code.

In myInputScope() we are just creating the reference of InputScope and adding it to the TextBox Control as per the conditions of the RadioButton.

We are also adding the event for the Radio Button Check Changed so that for every option changed by the user it will call the same block of code, myInputScope().

That's all for this article. I am embeding the source file so that you can go through it.