Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to – Word Suggestions in Windows Phone

DZone's Guide to

How to – Word Suggestions in Windows Phone

Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

In this tutorial we are going to learn how to provide a word suggestion for user entered text in Windows phone application development. Word suggestions are something like an 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. 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.

image

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.

image

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:

image

We can see the word suggestion works exactly the way we were 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!!!

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Karthikeyan Anbarasan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}