InputScope for a TextBox in Windows Phone 7 apps
Join the DZone community and get the full member experience.
Join For FreeIn this tutorial I will demonstrate new InputScope feature of Windows Phone 7 platform. This feature applied to a textbox could be very useful for all kinds of WP7 consumers, because it increases usability of your applications and decreases time required for entering specific text using SIP (Soft Input Panel).
Additional Information
Definition
My definition of InputScope would be that InputScope is an attribute that can be applied to a textbox control to change the default SIP layout (i.e when user enters a text in textbox).
Ways of specifying InputScope
There are several ways of specifying InputScope for a textbox. Each of the ways has similar result, but also has specific advantages (“+”) and disadvantages (“-”).
Full XAML declaration“+” access to IntelliSence (suggestions) for NameValue attribute of InputScopeName element
“-” a lot of XAML markup
Sample:
<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1"> <TextBox.InputScope> <InputScope> <InputScopeName NameValue="Number" /> </InputScope> </TextBox.InputScope> </TextBox>Short XAML declaration
“+” not much XAML markup
“-” no access to IntelliSence (suggestions) for InputScope attribute (you have to keep all available InputScope values in mind)
Sample:
<TextBox Text="NumericTextBox" InputScope="Number" Height="70" Width="460" Grid.Row="1">Programmatically (in code)
“+” can be set dynamically
“+” strong-type (access to suggestions for InputScopeNameValue values)
“-” a lot of code
Sample (can be done in single line of code):
// tbEmotions - is a textbox tbEmotions.InputScope = new InputScope() { Names = { new InputScopeName() { NameValue = InputScopeNameValue.Chat } } };
Sample
* Open Visual Studio 2010 (or Express edition) with Windows Phone 7 Developer Tools installed
* Create a new “Windows Phone application” project
* Open MainPage.xaml file in designer
* Open XAML editor. Find a <Grid> element with
x:Name=”ContentGrid”. This grid can be used as a container for our
TextBoxes
* Next we need to add two RowDefinitions for the Grid:
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>* Next step is to add a TextBox with Height = 70 for a Grid (ContentGrid). Simply add TextBox declaration within your XAML:
<TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0"> </TextBox>* Add another TextBox with InputScope (with Property NameValue=”Number”) and Height=”70″ to ContentGrid:
<TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1"> <TextBox.InputScope> <InputScope> <InputScopeName NameValue="Number" /> </InputScope> </TextBox.InputScope> </TextBox>
* Your ContentGrid XAML will now look like that:
<Grid x:Name="ContentGrid" Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBox Text="StandartTextBox" Height="70" Width="460" Grid.Row="0"> </TextBox> <TextBox Text="NumericTextBox" Height="70" Width="460" Grid.Row="1"> <TextBox.InputScope> <InputScope> <InputScopeName NameValue="Number" /> </InputScope> </TextBox.InputScope> </TextBox> </Grid>
* Now open the application in Emulator in Debug mode (simply by pressing F5 button). Click on StandardTextBox and notice that the default SIP layout is displayed.
* Now click on NumericTextBox and notice that the SIP layout is now number-specific. So we can easily enter a numeric data.
* Now we can notice how SIP Layout changes according to specified InputScope. We have completed the first part of our tutorial.
InputScope Types
Basically, you can find all available InputScope types on MSDN website, but I have created a special C# code to display all those InputScopes on a single XAML page (textbox for each type). First, add a ScrollViewer and place a StackPanel inside with Vertical orientation.
<ScrollViewer> <StackPanel x:Name="MyVerticalStackPanel" Margin="12,0,12,0" Orientation="Vertical"></StackPanel> </ScrollViewer>
Then copy the following code to your class:
public InputScopeSample() { InitializeComponent(); MyVerticalStackPanel.Children.Clear(); int index = 0; foreach (int enumValue in GetValues(typeof(InputScopeNameValue))) { if (enumValue >= 0) { TextBox tb = new TextBox(); tb.Text = Enum.GetName(typeof(InputScopeNameValue), enumValue); tb.InputScope = new InputScope(); tb.InputScope.Names.Add(new InputScopeName() { NameValue = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), enumValue.ToString(), true) }); Grid.SetRow(tb, index); MyVerticalStackPanel.Children.Add(tb); index++; } } } public static int[] GetValues(Type typeOfEnum) { int[] values = new int[0]; if (typeOfEnum.BaseType == typeof(Enum)) { // public static members of enumeration var fields = typeOfEnum.GetFields(BindingFlags.Public | BindingFlags.Static); // set a size of a result array to number of members values = new int[fields.Length]; for (int index = 0; index < fields.Length; index++) { values[index] = (int)fields[index].GetValue(null); } } return values; }
As the result your page should be filled with different InputScopes (image bellow). Now you can compare different InputScopes and their SIP layouts.
Most commonly used InputScopes
Bellow are the most commonly used, in my opinion, InputScope types.
-
Number
-
Telephone Number
-
Url
-
Email
Published at DZone with permission of Jevgeni Tšaikin. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Alpha Testing Tutorial: A Comprehensive Guide With Best Practices
-
Health Check Response Format for HTTP APIs
-
What Is mTLS? How To Implement It With Istio
-
What Is React? A Complete Guide
Comments