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.
<grid x:name="ContentPanel" grid.row="1" margin="12,0,12,0">
<controls:Pivot Margin="8,8,0,8" Title="Using">
<controls:PivotItem Header="Xaml">
<Grid Margin="0,-20,0,0">
</Grid>
<controls:PivotItem Header="C#">
<Grid Margin="0,-20,0,0">
</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:
![MainPage]()
Step 2: Now go to the MainPage.xaml file and add the following code for each TextBox in the first Pivot Item, like:
<!-- TextBox InputScopeof type AddressCity -->
<textbox height="72" horizontalalignment="Right" margin="0,34,11,0" name="textBoxName"
text="" verticalalignment="Top" width="264">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="AddressCity" />
</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:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<controls:Pivot Margin="8,8,0,8" Title="Using">
<controls:PivotItem Header="Xaml">
<Grid Margin="0,-20,0,0">
<!-- TextBox InputScopeof type AddressCity -->
<TextBox Height="72" HorizontalAlignment="Right" Margin="0,34,11,0" Name="textBoxName" Text="" VerticalAlignment="Top" Width="264" >
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="AddressCity" />
</InputScope>
</TextBox.InputScope>
</TextBox>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="23,52,0,0" Name="textBlock1" Text="Address Type :" VerticalAlignment="Top" />
<!-- TextBox InputScope Phone Number Type -->
<TextBox Height="72" HorizontalAlignment="Right" Margin="0,127,10,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="264" >
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="TelephoneNumber"/>
</InputScope>
</TextBox.InputScope>
</TextBox>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="10,148,0,0" Name="textBlock2" Text="Phone No. Type" VerticalAlignment="Top" />
<!-- TextBox InputScope URL Type -->
<TextBox Height="72" HorizontalAlignment="Right" Margin="0,208,12,0" Name="textBox3" Text="" VerticalAlignment="Top" Width="264" >
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Url"/>
</InputScope>
</TextBox.InputScope>
</TextBox>
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,227,0,0" Name="textBlock3" Text=" URL Type ::" VerticalAlignment="Top" />
</Grid>
</controls:PivotItem>
<!-- InputScope by using C# -->
<controls:PivotItem Header="C#">
<Grid Margin="0,-20,0,0">
<RadioButton Content="Address" Height="72" HorizontalAlignment="Left" Margin="14,4,0,0" Name="radioButtonAddress" VerticalAlignment="Top" Checked="radioButtonAddress_Checked" />
<RadioButton Content="Local Phone" Height="72" HorizontalAlignment="Left" Margin="212,6,0,0" Name="radioButtonPhone" VerticalAlignment="Top" Checked="radioButtonPhone_Checked" />
<RadioButton Content="Digits" Height="72" HorizontalAlignment="Left" Margin="15,73,0,0" Name="radioButtonDigits" VerticalAlignment="Top" Checked="radioButtonDigits_Checked" />
<RadioButton Content="Chat" Height="72" HorizontalAlignment="Left" Margin="211,74,0,0" Name="radioButtonChat" VerticalAlignment="Top" Checked="radioButtonChat_Checked" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="11,135,0,0" Name="textBoxInputScope" Text="" VerticalAlignment="Top" Width="400" />
</Grid>
</controls:PivotItem>
</controls:Pivot>
</Grid>
</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.