Developpement Windows Phone - partie 6

Travailler avec du texte sur Windows Phone

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

• Bien démarrer (Hello World)
• Créer une interface utilisateur pour Windows Phone en XAML
• Utiliser des contrôles
• Types de contrôles
• Contrôles Panorama et Pivot
• Travailler avec du texte sur le Windows Phone
• Mise en page sur l’écran
• Orientations de l’écran
• Saisie tactile
• Navigation
• Exécuter votre application en arrière-plan (tombstoning)
• Notifications Push pour le développement Windows Phone
• Publier votre application sur le Marketplace

Visuels et média

• Images
• Animations
• Vidéo et Audio
• Graphiques
• Pinceaux

Travailler avec les données

• Obtenir des données dans vos applications Windows Phone
• Data binding
• Isolated storage
• Accéder à un service Web REST
• Consommer des données Windows Azure

Sondes et autres fonctionnalités spécifiques au téléphone

• Lanceurs et choosers
• Détecter des mouvements (accéléromètres)
• Développer avec le GPS Windows Phone (Services de localisation)
• Développer avec l’appareil photo du Windows Phone

Travailler avec du texte sur Windows Phone

Silverlight pour Windows Phone fournit plusieurs contrôles permettant le rendu de texte, avec un ensemble de propriétés pour le formatage du texte. Les contrôles qui sont à base de texte  disponibles dans Silverlight sont les TextBlock, les TextBox et PasswordBox. Ce tutoriel vous montre comment vous pouvez utiliser ces contrôles pour afficher et de saisir du texte.

Ce tutoriel contient les sections suivantes:

• TextBlock
• TextBox
• Disposition SIP dans un TextBox
• PasswordBox

Textblock

Le TextBlock est le principal contrôle pour l'affichage de texte en lecture seule dans les applications Windows Phone. Vous pouvez afficher du texte dans un contrôle TextBlock en utilisant sa propriété Text .

Le XAML suivant montre comment définir un contrôle TextBlock et définir sa propriété Text en une chaine de caractères.

Code Snippet

1. <TextBlock Text="Hello, world!" />

L'illustration suivante affiche le résultat du XAML précédent.

Vous pouvez également afficher une série de chaines de caractères dans un TextBlock, où chaque chaine a une forme différente. Vous pouvez faire cela en utilisant l'élément Run pour afficher chaque chaine avec sa mise en forme et en séparant chaque élément Run avec un élément LineBreak .

Le XAML suivant montre comment définir plusieurs chaines de texte formatées différemment dans un TextBlock en utilisant des objets Run séparés par un LineBreak.

Code Snippet

1. <Grid>
2.             <TextBlock FontFamily="Arial" Width="400" >
3.                 <LineBreak/>
4.                 <Run Foreground="Maroon" FontFamily="Courier New" FontSize="40">
5.                     Courier New 24
6.                 </Run>
7.                 <LineBreak/>
8.                 <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="30" FontStyle="Italic">
9.                     Times New Roman Italic 18
10.                 </Run>
11.                 <LineBreak/>
12.                 <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
13.                     Verdana Bold 14
14.                 </Run>
15.             </TextBlock>
16.         </Grid>

L'illustration suivante montre le résultat du XAML précédent.

Pour plus d'informations sur le TextBlock, consultez la section Text et Fonts et TextBlock.

Textbox

Vous pouvez utiliser un contrôle TextBox pour entrer et modifier du texte avec un seul format et multi-ligne. Vous pouvez utiliser la propriété TextBox.Text pour définir le texte dans un TextBox. Dans l'exemple suivant, il y a trois zones de texte. Lorsque vous entrez du texte dans le premier TextBox, le même texte est affiché dans la  seconde TextBox. Ceci est réalisé en utilisant l'évènement TextChanged. Le troisième TextBox affiche du texte en filigrane. Pour mettre en œuvre du texte en filigrane, vous pouvez utiliser les propriétés de polices différentes, telles que Foreground et FontSize, et des évènements, tels que GotFocus et LostFocus.

Pour essayer cet exemple, cliquez et tapez dans la première et la troisième TextBox.

Remarque

Les exemples de ce tutoriel utilisent Silverlight exécuté dans le navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement réel peut être légèrement différent dans l'émulateur Windows Phone ou sur un appareil Windows Mobile.

XAML

Code Snippet

1. <StackPanel Background="Transparent">
2.     <TextBlock Text="Type Text Here" />
3.     <TextBox x:Name="ReadWriteTB" TextChanged="ReadWriteTB_TextChanged" IsReadOnly="False" />
4.     <TextBlock Text="Read Only TextBox" />
5.     <TextBox x:Name="ReadOnlyTB" IsReadOnly="True" />
6.     <TextBlock Text="Search Type TextBox" />
7.     <TextBlock FontSize="17" TextWrapping="Wrap">
8.         When you click inside the text box the watermark text is removed and the
9.         cursor appears ready for input.
10.     </TextBlock>
11.     <TextBox x:Name="WatermarkTB" Text="Search" Foreground="Gray" GotFocus="WatermarkTB_GotFocus" LostFocus="WatermarkTB_LostFocus" />
12. </StackPanel>

C#

Code Snippet

1. //The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
2.         private void ReadWriteTB_TextChanged(object sender, RoutedEventArgs e)
3.         {
4.             ReadOnlyTB.Text = ReadWriteTB.Text;
5.         }
6.         //The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
7.         //gets focus.
8.         private void WatermarkTB _GotFocus(object sender, RoutedEventArgs e)
9.         {
10.             if (WatermarkTB.Text == "Search")
11.             {
12.                 WatermarkTB.Text = "";
13.                 SolidColorBrush Brush1 = new SolidColorBrush();
14.                 Brush1.Color = Colors.Magenta;
15.                 WatermarkTB.Foreground = Brush1;
16.             }
17.         }
18.  
19.         //The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
20.         //loses focus. Also, if SearchTB loses focus and no text is entered, the
21.         //text "Search" is displayed.
22.         private void WatermarkTB _LostFocus(object sender, RoutedEventArgs e)
23.         {
24.             if (WatermarkTB .Text == String.Empty)
25.             {
26.                 WatermarkTB.Text = "Search";
27.                 SolidColorBrush Brush2 = new SolidColorBrush();
28.                 Brush2.Color = Colors.Blue;
29.                 WatermarkTB.Foreground = Brush2;
30.             }
31.         }

Visual Basic

Code Snippet

1.     'The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
2.     'gets focus.
3.     Private WatermarkTB As System.Void GotFocus(object, sender, RoutedEventArgs, e)
4.         If (WatermarkTB.Text = "Search") Then
5.             WatermarkTB.Text = ""   
6.  
7.     Dim Brush1 As SolidColorBrush = New SolidColorBrush
8.         Brush1.Color = Colors.Magenta
9.         WatermarkTB.Foreground = Brush1
10.  
11.         End If
12.     'The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
13.     'loses focus. Also, if SearchTB loses focus and no text is entered, the
14.     'text "Search" is displayed.
15.     Private WatermarkTB As System.Void
16. _       LostFocus(object, sender, RoutedEventArgs, e)
17.         If (WatermarkTB.Text = String.Empty) Then
18.             WatermarkTB.Text = "Search"
19.     Dim Brush2 As SolidColorBrush = New SolidColorBrush
20.     Brush2.Color = Colors.Blue
21.     WatermarkTB.Foreground = Brush2
22.         End If
23.  
24.     'The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
25.     Private Sub ReadWriteTB_TextChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
26.         ReadOnlyTB.Text = ReadWriteTB.Text
27.     End Sub

La disposition sip dans un textbox

Le principal moyen par lequel vous entrez du texte dans une application Windows Phone est d'utiliser un petit clavier à l'écran, lequel est appelé « panneau de saisie logiciel » ou SIP. Le clavier SIP s’ouvre en glissant automatiquement du bas de l'écran quand un contrôle modifiable tel que le TextBox devient actif. Lorsqu'un utilisateur tape en dehors du contrôle d'édition, fait défiler une liste, ou appuie sur le bouton Back, il se ferme en glissant vers le bas de l'écran.

Si un téléphone est doté d'un clavier physique (ce qui est une option du fabricant du téléphone) et qu’il est actif, le clavier SIP se fermera automatiquement. Vous pouvez spécifier la configuration du clavier SIP, ce qui vous permet d'accéder facilement aux caractères d'entrées prévus en fonction du contexte de l’application. Par exemple, lorsque vous utilisez le clavier SIP pour entrer un code postal, vous ne voulez voir que les touches numériques. Vous pouvez spécifier la configuration du clavier pour cette saisie en utilisant la propriété InputScope.

Le tableau suivant liste plusieurs dispositions SIP couramment utilisées et les InputScopeNameValue associés que vous pouvez spécifier en XAML ou dans le code

input scope	Description	illustration
Default	Ceci est la configuration par défaut quand aucun champ d’entrée n’est spécifié. Cela affiche la disposition standard QWERTY et automatise la première lettre en majuscule d'une phrase.
Text	L'utilisateur aura la plupart du temps du texte en type standard. Cette disposition offre des suggestions de texte, correction automatique, auto-apostrophe, l'auto-accentuation, et l'auto-capitalisation. Cette disposition a également accès à des lettres, chiffres, symboles, et émoticônes basés sur de l’ASCII. Vous pouvez utiliser ce modèle dans des domaines tels que la messagerie électronique et des documents.
Chat	Utilisez ce modèle lorsque l'utilisateur utilise cette technique pour taper des mots standards, de l'argot et des abréviations. Cette disposition offre des suggestions de texte tout en écrivant et en tapant sur un mot, la correction automatique, l’auto-apostrophe, l'auto-accentuation, et l'auto-majuscule de la première lettre d'une phrase. Ce modèle a également accès à des lettres, chiffres, symboles et à des émoticônes. Vous pouvez utiliser ce modèle dans des domaines tels que les SMS, la messagerie instantanée, les applications Twitter. Utilisez cette disposition lorsque l'utilisateur utilise essentiellement des mots de type standard, de l'argot et des abréviations.
URL	Utilisez ce modèle lorsque l'utilisateur doit taper une URL. Ce modèle désactive toutes les fonctions de correction automatique et offre une mise en page Web avec des touches « .com » et  « Go ».
TelephoneNumber	Utilisez cette configuration à 12 touches pour les numéros de téléphone
EmailSmtpAddress	Utilisez cette configuration pour les adresses email. Cette disposition inclut les touches @ et com., et un accès facile à la disposition le numéro de téléphone.
CurrencyAmount	Utilisez cette configuration pour l'entrée de devises.

ll existe plus de 60 champs d'entrées différentes. Pour une liste complète des valeurs InputScope prises en charge dans Windows Mobile 7, consultez la rubrique InputScopeNameValue.

L'exemple suivant montre comment vous pouvez définir le champ d'entrée pour un contrôle TextBox en utilisant le XAML et le C#.

XAML

Code Snippet

1. <TextBox Text="HelloWorld">
2.         <TextBox.InputScope>
3.             <InputScope>
4.                 <InputScopeName NameValue="Chat" />
5.             </InputScope>
6.         </TextBox.InputScope>
7.     </TextBox>

C#

Code Snippet

1.  
2. InputScope IPChat = new InputScope();
3. InputScopeName IPNChat = new InputScopeName();
4. IPNChat .NameValue= InputScopeNameValue.Chat;
5. IPChat.Names.Add(IPNChat);
6. TBChatWindow.InputScope = IPChat;

Visual Basic

Code Snippet

1. Dim IPChat As InputScope = New InputScope
2. Dim IPNChat As InputScopeName = New InputScopeName
3. IPNChat.NameValue = InputScopeNameValue.Chat
4. IPChat.Names.Add(IPNChat)
5. TBChatWindow.InputScope = IPChat

Passwordbox

Vous pouvez utiliser le contrôle PasswordBox pour entrer des mots de passe. L'utilisateur ne peut pas voir le texte saisi, uniquement les caractères qui représentent le mot de passe sont affichés. Vous pouvez utiliser la propriété Password pour obtenir ou définir un mot de passe et utiliser la propriété  PasswordChar pour préciser le caractère du password.

Pour plus d'informations sur le contrôle PasswordBox voir la rubrique PasswordBox .

Voir aussi

• Text et Fonts

Et après

Maintenant que vous êtes familier avec les composants d'interface utilisateur de base de contrôles et de texte, il est temps de les positionner où vous voulez dans votre application: Tutoriel sur la mise en page.