Partager via

Contrôles de texte

Les contrôles de texte se composent de zones de saisie de texte, de zones de mot de passe, de zones de suggestion automatique et de blocs de texte. L’infrastructure XAML fournit plusieurs contrôles pour le rendu, l’entrée et la modification du texte, ainsi qu’un ensemble de propriétés pour la mise en forme du texte.

API importantes : classe TextBlock, classe RichTextBlock, classe TextBox, classe RichEditBox, classe AutoSuggestBox, classe PasswordBox

Est-ce le contrôle approprié ?

Le contrôle de texte que vous utilisez dépend de votre scénario. Utilisez ces informations pour sélectionner le contrôle de texte approprié à utiliser dans votre application.

Afficher le texte en lecture seule

Utilisez un TextBlock pour afficher la majeure partie du texte non modifiable dans votre application. Vous pouvez l’utiliser pour afficher du texte à ligne unique ou multiligne, des liens hypertexte inline et du texte avec une mise en forme telle que gras, italique ou souligné.

TextBlock est généralement plus facile à utiliser et offre de meilleures performances de rendu de texte que RichTextBlock. Il est donc préférable pour la plupart du texte de l’interface utilisateur de l’application. Vous pouvez facilement accéder et utiliser du texte à partir d’un TextBlock dans votre application en obtenant la valeur de la propriété Text .

Il fournit également de nombreuses options de mise en forme identiques pour personnaliser le rendu de votre texte. Bien que vous puissiez placer des sauts de ligne dans le texte, TextBlock est conçu pour afficher un seul paragraphe et ne prend pas en charge la mise en retrait du texte.

Utilisez un RichTextBlock lorsque vous avez besoin de la prise en charge de plusieurs paragraphes, du texte à plusieurs colonnes ou d’autres dispositions de texte complexes ou d’éléments d’interface utilisateur inline tels que des images. RichTextBlock fournit plusieurs fonctionnalités pour la disposition avancée du texte.

La propriété de contenu de RichTextBlock est la propriété Blocks , qui prend en charge le texte basé sur des paragraphes via l’élément Paragraph . Il n’a pas de propriété Text que vous pouvez utiliser pour accéder facilement au contenu texte du contrôle dans votre application.

Entrée de texte

Utilisez un contrôle TextBox pour permettre à un utilisateur d’entrer et de modifier du texte non mis en forme, par exemple dans un formulaire. Vous pouvez utiliser la propriété Text pour obtenir et définir le texte dans une zone de texte.

Vous pouvez créer une zone de texte en lecture seule, mais il doit s’agir d’un état conditionnel temporaire. Si le texte n’est jamais modifiable, envisagez d’utiliser un TextBlock à la place.

Utilisez un contrôle PasswordBox pour collecter un mot de passe ou d’autres données privées, telles qu’un numéro de sécurité sociale. Une zone de mot de passe est une zone d’entrée de texte qui masque les caractères tapés dans celui-ci pour la confidentialité. Une zone de mot de passe ressemble à une zone d’entrée de texte, sauf qu’elle affiche des puces à la place du texte entré. Le caractère à puces peut être personnalisé.

Utilisez un contrôle AutoSuggestBox pour afficher à l’utilisateur une liste de suggestions à choisir au fur et à mesure qu’il tape. Une zone de suggestion automatique est une zone d’entrée de texte qui déclenche une liste de suggestions de recherche de base. Les termes suggérés peuvent être issus d'une combinaison de termes de recherche populaires et de termes précédemment saisis par les utilisateurs.

Vous devez également utiliser un contrôle AutoSuggestBox pour implémenter une zone de recherche.

Utilisez un RichEditBox pour afficher et modifier des fichiers texte. Vous n’utilisez pas de RichEditBox pour obtenir une entrée utilisateur dans votre application de la façon dont vous utilisez d’autres zones de saisie de texte standard. Au lieu de cela, vous l’utilisez pour utiliser des fichiers texte distincts de votre application. Vous enregistrez généralement du texte entré dans un richEditBox dans un fichier .rtf.

La saisie de texte est-elle la meilleure option ?

Il existe de nombreuses façons d’obtenir une entrée utilisateur dans votre application. Ces questions vous aideront à répondre si l’une des zones d’entrée de texte standard ou un autre contrôle est la meilleure solution pour obtenir une entrée utilisateur.

  • Est-il pratique d’énumérer efficacement toutes les valeurs valides ? Si c’est le cas, envisagez d’utiliser l’un des contrôles de sélection, comme une case à cocher, une liste déroulante, une zone de liste, un curseur, un interrupteur à bascule, un sélecteur de dates ou un sélecteur d'heure.
  • Existe-t-il un ensemble assez petit de valeurs valides ? Si c’est le cas, envisagez une liste déroulante ou une zone de liste, en particulier si les valeurs sont plus de quelques caractères.
  • Les données valides ne sont-elles pas complètement non contraintes ? Ou les données valides sont-elles limitées uniquement par le format (longueur contrainte ou types de caractères) ? Dans ce cas, utilisez un contrôle d’entrée de texte. Vous pouvez limiter le nombre de caractères qui peuvent être entrés et vous pouvez valider le format dans votre code d’application.
  • La valeur représente-t-elle un type de données qui a un contrôle commun spécialisé ? Dans ce cas, utilisez le contrôle approprié au lieu d’un contrôle d’entrée de texte. Par exemple, utilisez un DatePicker au lieu d’un contrôle d’entrée de texte pour accepter une entrée de date.
  • Si les données sont strictement numériques :
    • La valeur est-elle entrée approximativement et/ou relative à une autre quantité sur la même page ? Dans ce cas, utilisez un curseur.
    • L’utilisateur bénéficie-t-il de commentaires instantanés sur l’effet de la définition des modifications ? Si c’est le cas, utilisez un curseur, éventuellement avec une commande associée.
    • La valeur entrée est-elle susceptible d’être ajustée une fois que le résultat est observé, par exemple avec un volume ou une luminosité d’écran ? Dans ce cas, utilisez un curseur.

Examples

Galerie WinUI 2
Galerie WinUI

Si l’application Galerie WinUI 2 est installée, cliquez ici pour ouvrir l’application et voir les contrôles de texte en action.

Zone de texte

Zone de texte

Boîte de suggestion automatique

Exemple de contrôle de suggestion automatique développé

Zone Mot de passe

État du focus de la zone de mot de passe lors de la saisie du texte

Créer un contrôle de texte

Consultez ces articles pour obtenir des informations et des exemples spécifiques à chaque contrôle de texte.

Recommandations en matière de police et de style

Consultez les articles suivants pour obtenir des instructions sur la police :

Saisie effectuée à l’aide du stylet

S’applique à : TextBox, RichEditBox, AutoSuggestBox (UWP uniquement)

À compter de Windows 10, version 1803, les zones d’entrée de texte XAML prennent en charge la prise en charge incorporée des entrées de stylet à l’aide de Windows Ink. Lorsqu’un utilisateur appuie dans une zone d’entrée de texte à l’aide d’un stylet Windows, la zone de texte se transforme pour permettre à l’utilisateur d’écrire directement dans celui-ci avec un stylet, plutôt que d’ouvrir un panneau d’entrée distinct.

Pour plus d’informations, consultez Entrée de texte avec la vue d’écriture manuscrite.

Choisir le clavier adapté à votre contrôle de texte

S’applique à : TextBox, PasswordBox RichEditBox

Pour aider les utilisateurs à entrer des données à l’aide du clavier tactile ou du panneau d’entrée réversible (SIP), vous pouvez définir l’étendue d’entrée du contrôle de texte pour qu’elle corresponde au type de données que l’utilisateur doit entrer.

Astuce : Ces informations ne s'appliquent qu'au protocole SIP. Il ne s’applique pas aux claviers matériels ou au clavier visuel disponible dans les options De facilité d’accès Windows.

Le clavier tactile peut être utilisé pour l’entrée de texte lorsque votre application s’exécute sur un appareil avec un écran tactile. Le clavier tactile est appelé lorsque l’utilisateur appuie sur un champ d’entrée modifiable, tel qu’un TextBox ou RichEditBox. Vous pouvez rendre plus rapide et plus facile pour les utilisateurs d’entrer des données dans votre application en définissant l’étendue d’entrée du contrôle de texte pour qu’elle corresponde au type de données que vous attendez de l’utilisateur. L’étendue d’entrée fournit un indicateur au système sur le type d’entrée de texte attendu par le contrôle afin que le système puisse fournir une disposition de clavier tactile spécialisée pour le type d’entrée.

Par exemple, si une zone de texte est utilisée uniquement pour entrer un code confidentiel à 4 chiffres, définissez la propriété InputScope sur Number. Cela indique au système d’afficher la disposition du pavé numérique, facilitant ainsi la saisie du code PIN par l'utilisateur.

Important
L’étendue d’entrée n’entraîne aucune validation d’entrée et n’empêche pas l’utilisateur de fournir une entrée par le biais d’un clavier matériel ou d’un autre périphérique d’entrée. Vous êtes toujours responsable de la validation de l’entrée dans votre code en fonction des besoins.

Pour plus d’informations, consultez Utiliser l’étendue d’entrée pour modifier le clavier tactile.

Polices de couleur

S’applique à : TextBlock, RichTextBlock, TextBox, RichEditBox

Windows a la possibilité pour les polices d’inclure plusieurs couches colorées pour chaque glyphe. Par exemple, la police Segoe UI Emoji définit les versions de couleur de l’émoticône et d’autres caractères Emoji.

Les contrôles de texte standard et enrichi prennent en charge les polices de caractères colorées. Par défaut, la propriété IsColorFontEnabled est vraie et les polices avec ces couches supplémentaires sont rendues en couleur. La police de caractères de couleur par défaut sur le système est Segoe UI Emoji et les contrôles utilisent cette police pour présenter les glyphes en couleur.

<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>

Le texte rendu ressemble à ceci :

Bloc de texte avec police de couleur

Pour plus d’informations, consultez la propriété IsColorFontEnabled .

Instructions pour les séparateurs de lignes et de paragraphes

S’applique à : TextBlock, RichTextBlock, TextBox à plusieurs lignes, RichEditBox

Utilisez le caractère de séparateur de ligne (0x2028) et le caractère séparateur de paragraphe (0x2029) pour diviser le texte brut. Une nouvelle ligne est commencée après chaque séparateur de ligne. Un nouveau paragraphe est commencé après chaque séparateur de paragraphe.

Il n’est pas nécessaire de démarrer la première ligne ou le paragraphe d’un fichier avec ces caractères ou de terminer la dernière ligne ou le dernier paragraphe avec eux ; cela indique qu’il existe une ligne ou un paragraphe vide à cet emplacement.

Votre application peut utiliser le séparateur de ligne pour indiquer une fin de ligne inconditionnelle. Toutefois, les séparateurs de lignes ne correspondent pas aux caractères de retour chariot et de saut de ligne distincts, ou à une combinaison de ces caractères. Les séparateurs de ligne doivent être traités séparément des caractères de retour de chariot et de saut de ligne.

Votre application peut insérer un séparateur de paragraphes entre des paragraphes de texte. L’utilisation de ce séparateur permet de créer des fichiers texte brut qui peuvent être mis en forme avec différentes largeurs de ligne sur différents systèmes d’exploitation. Le système cible peut ignorer les séparateurs de lignes et interrompre les paragraphes uniquement aux séparateurs de paragraphes.

Instructions pour la vérification orthographique

S’applique à : TextBox, RichEditBox

Lors de l’entrée de texte et de la modification, la vérification orthographique informe l’utilisateur qu’un mot est mal orthographié en le mettant en surbrillance avec unquiggle rouge et permet à l’utilisateur de corriger l’orthographe incorrecte.

Voici un exemple de vérificateur d’orthographe intégré :

vérificateur d’orthographe intégré

Utilisez la vérification orthographique avec les contrôles d’entrée de texte à ces deux fins :

  • Pour corriger automatiquement les fautes d’orthographe

    Le moteur de vérification orthographique corrige automatiquement les mots mal orthographiés lorsqu’il est sûr de la correction. Par exemple, le moteur remplace automatiquement « teh » par « the ».

  • Pour afficher d’autres orthographes

    Lorsque le moteur de vérification orthographique n’est pas sûr des corrections, il ajoute une ligne rouge sous le mot mal orthographié et affiche les alternatives dans un menu contextuel lorsque vous appuyez ou cliquez avec le bouton droit sur le mot.

  • Utilisez la vérification orthographique pour aider les utilisateurs à entrer des mots ou des phrases dans des contrôles d’entrée de texte. La vérification orthographique fonctionne avec les entrées tactiles, souris et clavier.

  • N’utilisez pas la vérification orthographique lorsqu’un mot n’est pas susceptible d’être dans le dictionnaire ou si les utilisateurs ne valeurraient pas la vérification orthographique. Par exemple, ne l’activez pas si la zone de texte est destinée à capturer un numéro de téléphone ou un nom.

  • Ne désactivez pas la vérification orthographique, car le moteur de vérification orthographique actuel ne prend pas en charge la langue de votre application. Lorsque le vérificateur orthographique ne prend pas en charge une langue, il ne fait rien, il n’y a donc aucun mal à laisser l’option activée. En outre, certains utilisateurs peuvent utiliser un éditeur de méthode d’entrée (IME) pour entrer une autre langue dans votre application, et cette langue peut être prise en charge. Par exemple, lors de la création d’une application de langue japonaise, même si le moteur de vérification orthographique peut ne pas reconnaître cette langue, ne désactivez pas la vérification orthographique. L’utilisateur peut basculer vers un IME anglais et taper l’anglais dans l’application ; si la vérification orthographique est activée, l’anglais obtient la vérification orthographique.

Pour les contrôles TextBox et RichEditBox, la vérification orthographique est activée par défaut. Vous pouvez le désactiver en définissant la propriété IsSpellCheckEnabled sur false.

Pour les concepteurs

Pour les développeurs (XAML)

  • Last updated on