L'autocompletion sur Windows Phone 7

19 December 2011

Temps de lecture ~4 minutes

Nous allons voir dans cet article les différentes façon de créer un système d’auto-complétion (ou l’équivalent) sur un Windows Phone 7.

Méthode 1 : InputScope

Comme pour d’autres OS mobile, WP7 permet de rechercher un mot entré par un utilisateur dans un dictionnaire.
De plus via la propriété InputScope nous allons pouvoir spécifier un contexte.

Actuellement les scopes disponible sont listés dans l’énumération InputScopeNameValue

Nom de membre Description
Default La gestion par défaut de commandes d'entrée.
Url Le modèle d'entrée de texte pour une adresse URL (Uniform Resource Locator).
FullFilePath Le modèle d'entrée de texte pour le chemin d'accès complet d'un fichier.
FileName Le modèle d'entrée de texte pour un nom de fichier.
EmailUserName Le modèle d'entrée de texte pour un nom d'utilisateur de courrier électronique.
EmailSmtpAddress Le modèle d'entrée de texte pour une adresse de messagerie utilisant le protocole SMTP (Simple Mail Transfer Protocol).
LogOnName Le modèle d'entrée de texte pour un nom de connexion.
PersonalFullName Le modèle d'entrée de texte pour le nom complet d'une personne.
PersonalNamePrefix Le modèle d'entrée de texte pour le préfixe du nom d'une personne.
PersonalGivenName Le modèle d'entrée de texte pour le prénom d'une personne.
PersonalMiddleName Le modèle d'entrée de texte pour le second prénom d'une personne.
PersonalSurname Le modèle d'entrée de texte pour le nom de famille d'une personne.
PersonalNameSuffix Le modèle d'entrée de texte pour le suffixe du nom d'une personne.
PostalAddress Le modèle d'entrée de texte pour une adresse postale.
PostalCode Le modèle d'entrée de texte pour un code postal.
AddressStreet Le modèle d'entrée de texte pour une adresse de rue.
AddressStateOrProvince Le modèle d'entrée de texte pour un état ou une province.
AddressCity Le modèle d'entrée de texte pour une adresse de ville.
AddressCountryName Le modèle d'entrée de texte pour le nom d'un pays.
AddressCountryShortName Le modèle d'entrée de texte pour le nom abrégé d'un pays.
CurrencyAmountAndSymbol Le modèle d'entrée de texte pour montant et symbole de devise.
CurrencyAmount Le modèle d'entrée de texte pour le montant d'une devise.
Date Le modèle d'entrée de texte pour une date de calendrier.
DateMonth Le modèle d'entrée de texte pour le numéro du mois dans une date de calendrier.
DateDay Le modèle d'entrée de texte pour le numéro du jour dans une date de calendrier.
DateYear Le modèle d'entrée de texte pour l'année dans une date de calendrier.
DateMonthName Le modèle d'entrée de texte pour le nom du mois dans une date de calendrier.
DateDayName Le modèle d'entrée de texte pour le nom du jour dans une date de calendrier.
Digits Le modèle d'entrée de texte pour les chiffres.
Number Le modèle d'entrée de texte pour un nombre.
OneChar Le modèle d'entrée de texte pour un caractère.
Password Le modèle d'entrée de texte pour un mot de passe.
TelephoneNumber Le modèle d'entrée de texte pour un numéro de téléphone.
TelephoneCountryCode Le modèle d'entrée de texte pour un indicatif téléphonique de pays.
TelephoneAreaCode Le modèle d'entrée de texte pour un indicatif téléphonique régional.
TelephoneLocalNumber Le modèle d'entrée de texte pour un numéro de téléphone local.
Time Le modèle d'entrée de texte pour l'heure.
TimeHour Le modèle d'entrée de texte pour l'heure du jour.
TimeMinorSec
NumberFullWidth Le modèle d'entrée de texte pour un nombre de largeur complète.
AlphanumericHalfWidth Le modèle d'entrée de texte pour caractères alphanumériques à demi-chasse.
AlphanumericFullWidth Le modèle d'entrée de texte pour caractères alphanumériques à pleine chasse.
CurrencyChinese Le modèle d'entrée de texte pour devise chinoise.
Bopomofo Le modèle d'entrée de texte pour le système Bopomofo de transcription phonétique du chinois mandarin.
Hiragana Le modèle d'entrée de texte pour le système d'écriture Hiragana.
KatakanaHalfWidth Le modèle d'entrée de texte pour caractères Katakana à demi-chasse.
KatakanaFullWidth Le modèle d'entrée de texte pour caractères Katakana à pleine chasse.
Hanja Le modèle d'entrée de texte pour les caractères Hanja.
PhraseList
RegularExpression Le modèle d'entrée de texte pour une expression régulière.
Srgs Le modèle d'entrée de texte pour la Spécification de la Grammaire de la Reconnaissance vocale (SRGS).
Xml Le modèle d'entrée de texte pour XML.

Voici le XAML néccésaire pour activer cette fonctionnalité sur une textbox :

<TextBox InputScope="Text" />

et le résultat

Cette méthode est très simple et rapide à mettre en place, cependant les mots retournés, même si le contexte est précisé, ne correspondent pas forcément au besoin actuel, d’ou la seconde méthode.

Méthode 2 : AutoCompleteBox

Le contrôle SilverLight AutoCompleteBox permet de créer un champs de saisi qui sera autocompleté en utilisant une liste que l’on va pouvoir définir, la bonne nouvelle c’est que ce controle peut être utilisé sur WP7., la mauvaise c’est qu’il est un peu buggé.

Avant de pouvoir utiliser ce controle il faut rajouter la référence vers l’assembly System.Windows.Controls.Input

Il ne reste plus qu’à l’inserer dans votre XAML

<toolkit:AutoCompleteBox x:Name="acbArrival" Grid.Row="1" Grid.Column="1" Text="{Binding ArrivalTown, Mode=TwoWay}"
MinimumPopulateDelay="200"
MinimumPrefixLength="3"
FilterMode="StartsWith"
ValueMemberBinding="{Binding Name}"
ItemsSource="{ Binding TownsList}" Height="71" VerticalAlignment="Top"
SelectionChanged="acbArrival_SelectionChanged"
IsEnabledChanged="acbArrival_IsEnabledChanged"
>
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>

Zoom sur le contenu dans Chrome

On est tous habitué à utiliser le zoom sur nos navigateurs mobile en double tapant lorsque le contenu d'un site web n'est pas adapté l'éc...… Lire ...