In this lesson I will demonstrate new InputScope feature of Windows Phone 7. InputScope feature is, basically, used by TextBoxes. This feature could be very useful for all kinds of WP7 consumers, because it increases usability of your application and decreases time for entering specific text using SIP (
Soft Input Panel).
Requirements:
- Visual Studio 2010 with Windows Phone Developer Tools
- Windows Phone 7 emulator
- Silverlight 4+
Additional information:
Steps:
- 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. Now we are ready to edit XAML.
- Open XAML editor. Find a <Grid> element with x:Name="ContentGrid". This grid can be used as a container for our TextBoxes.
- Now we need to add 2 RowDefinitions there. That means that our Grid will have 2 rows.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
- Add a simple TextBox inside ContentGrid with Height="70".
<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 change the NameValue property of InputScopeName and notice layout changes for SIP. For that reason I have created a special code. You can insert it to MainPage.xaml.cs file to constructor right after InitializeComponent() method. (Pay attention to InputScopeNameValue Enumeration and EnumUtils).
// clear row definitions
foreach (RowDefinition rowDef in ContentGrid.RowDefinitions.ToList())
{
ContentGrid.RowDefinitions.Remove(rowDef);
}
// clear rows
foreach (UIElement gridRow in ContentGrid.Children.ToList())
{
ContentGrid.Children.Remove(gridRow);
}
int index = 0;
foreach (int enumValue in EnumUtils.GetValues(typeof(InputScopeNameValue)))
{
if (enumValue >= 0)
{
ContentGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
TextBox tb = new TextBox() { Text = Enum.GetName(typeof(InputScopeNameValue), enumValue) };
InputScope inputScope = new InputScope();
inputScope.Names.Add(new InputScopeName() { NameValue = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), enumValue.ToString(), true) });
tb.InputScope = inputScope;
Grid.SetRow(tb, index);
ContentGrid.Children.Add(tb);
index++;
}
}To enable the scrolling place your ContainerGrid inside ScrollViewer:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" x:Name="scrl" Grid.Row="1">
<Grid x:Name="ContentGrid">
Finally, you will have almost all textboxes to test (excluding Xml, Srgs, RegularExpression, PhraseList, because Enum.Parse accepts only positive integers).
