In this tutorial we are going to see how to provide a word suggestion for user entered text in Windows phone application development. Word suggestions are something like a kind of intellisense providing related list of words for the user entered inputs in the text boxes. Word suggestions will be provided on top of the input keyboard, On Screen keyboards have different formats which you can get clear idea by seeing this article Play with On-Screen Keyboard in Windows Phone. Input scope provides the related information based on the user entered data on a input screen.          [more]

Let us see in detail on how to use this word suggestions with input scope in a text box. To start with Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below.

Now drag and drop some controls from the tool box, basically a text box which is going to be assigned with the property of the inputscope based on the requirement. Once we added the text box we can see the screen looks like below.

Now we have 2 ways to assign the input scope first is we will assign the input scope in the XAML code itself and second one by adding it directly from the code behind as shown in the below codes. We have different input scopes available, please refer to the MSDN link which has the list of available input scope using this link On Screen Keyboard Input Scopes

XAML Code:

<phone:PhoneApplicationPage
    x:Class="F5DebugHowto38.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!–LayoutRoot is the root grid where all page content is placed–>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!–TitlePanel contains the name of the application and page title–>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Word Suggestion" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox Height="72" InputScope="Chat" HorizontalAlignment="Left" Margin="6,43,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="437" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="6,121,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="437" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace F5DebugHowto38
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            InputScope iscope = new InputScope();
            InputScopeName iscopeName = new InputScopeName();
            iscopeName.NameValue = InputScopeNameValue.TelephoneNumber;
            iscope.Names.Add(iscopeName);
            textBox2.InputScope = iscope;
        }
    }
}

We have assigned the Textbox1 directly with the input scope in the XAML code itself and for Textbox2 we have assigned the input scope at runtime by programming in the code behind. Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screen:

We can see the word suggestion works exactly the way we expecting, but for the numeric we don’t have word suggestions. We can use the Word Suggestions using the Input scope for a Text and Chat. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!