Accueil > Articles > Choisir le bon contrôle pour afficher du texte avec WPF

Choisir le bon contrôle pour afficher du texte avec WPF

WPF (Windows Presentation Foundation), disponible depuis la version 3.5 du .NET Framework, a introduit une refonte majeure de la couche graphique destinée aux applications Windows et Web ainsi qu’un nouveau langage dédié à la description des interfaces : le XAML. Pour les habitués des Windows.Forms et des objets de la librairie System.Drawing, l’apprentissage n’est pas si évident et peut même décourager. Trouver simplement l’équivalent d’un contrôle Windows.Forms peut ainsi se révéler réellement laborieux et déconcertant pour différentes raisons : le nouveau contrôle peut présenter des membres différents (le Label par exemple), être totalement absent et sans équivalent dans la nouvelle libraire (le calendrier), ou encore se retrouver noyé dans le foisonnement de nouveaux contrôles définis autour de la même fonction. C’est le cas par exemple des contrôles destinées à l’affichage ou à la saisie de texte.

Pour tous ceux qui se soucient un peu de choisir le contrôle le plus adapté à chaque situation, voici un petit récapitulatif de ce que nous propose le WPF à ce sujet via le nouvel espace de nom System.Windows.Controls, enrichi avec les liens MSDN utiles.

Pour les plus pressés, voici le lien pour aller directement au tableau récapitulatif.

 

 

Rappel des contrôles disponibles pour les Windows.Forms

 

Avant d’aborder les contrôles disponibles dans WPF et l’espace de nom System.Windows.Controls, voici un petit rappel de ceux disponibles dans les versions précédentes du .NET Framework (dans System.Windows.Forms) :

  • Label : Contrôle de base simple et léger dédié à l’affichage de petites zones de texte non éditable. Principalement utilisé pour définir les étiquettes des champs d’un formulaire ou pour afficher des informations courtes. Peut posséder un arrière-plan transparent. Ne permet pas la capture de texte (pas de fonction « copier » et impossible de sélectionner le texte affiché).
  • TextBox : Zone de saisie de texte simple (champ de formulaire, mot de passe, etc.). Ne gère pas la mise en forme (sauf pour le style général et la police de caractères) mais peut accepter l’affichage sur plusieurs lignes. Le contrôle peut être paramétré pour un affichage en lecture seule, utile pour pouvoir proposer la sélection et la copie du texte (ce que ne permet pas le Label).
  • RichTextBox : Texte avec mise en forme (format RTF). Offre aussi des méthodes pour faciliter le chargement et la sauvegarde dans un fichier et propose une fonction de recherche dans le texte.

On est donc assez limité lorsqu’il s’agit simplement d’afficher du texte de façon optimisée, puisque seul le contrôle Label est réellement dédié à cette fonction. Les deux autres contrôles, normalement réservés à la saisie et à l’édition, sont donc régulièrement utilisés en lecture seule pour pouvoir bénéficier de la capture du texte (sélection + fonction « copier »), du défilement ou encore des possibilité de mise en forme.

Ces trois contrôles sont les plus importants dans cette catégorie. On pourrait aussi citer le LinkLabel, variation du Label pour les liens hypertexte, ou encore le composant WebBrowser pour l’affichage de contenu HTML ou autre (XML par exemple), mais ces contrôles restent tout de même très spécialisés.

Au premier contact avec WPF, il n’est pas très difficile de retrouver les équivalents directs à ces trois principaux contrôles puisqu’ils conservent le même nom de classe dans le nouvel espace System.Windows.Controls. Cependant on réalise vite que la tâche n’est finalement pas si simple lorsque l’on constate que certains d’entre eux ont vu leurs propriétés modifiées (pour le Label par exemple) et que la librairie s’est enrichie d’un nombre impressionnant de classes, basées autour d’une nouvelle gestion des documents.

 

Les contrôles légers : Label et TextBlock

 

Nous allons commencer par regarder d’un peu plus près les contrôles les plus légers dédiés à l’affichage de petits éléments de texte : La nouvelle version du contrôle Label
et un nouvel élément : le TextBlock. Ces contrôles, comme les suivants, sont situés dans l’espace de nom System.Windows.Controls.

A noter que les exemples de code présentés ici sont écrits en XAML mais il est tout à fait possible de créer et de manipuler ces contrôles uniquement en C#. Pour trouver d’autres exemples plus détaillés, n’hésitez pas à jeter un œil sur les pages MSDN dédiées dont les liens sont proposés tout au long de cet article.

 

Le contrôle Label

Comme son homonyme des Windows.Forms, ce contrôle permet d’afficher de petites quantités de texte et sert habituellement d’étiquette pour les autres objets. Pas de surprise ici, il s’agit par défaut du contrôle le plus léger de cette catégorie avec une prise en charge minimale des fonctions de mise en forme et d’affichage du texte.

Cependant, la propriété habituelle Text a ici curieusement disparue pour être remplacée par la propriété Content. Ceci est dû à la classe parente dont dérive Label : ContentControl. Elle permet d’associer à un Label un « contenu unique ». Ce contenu étant de type object, il est tout à fait possible d’y mettre autre chose que du texte comme par exemple : une image, un bouton, ou encore… un GroupBox contenant d’autres contrôles, ce qui est plutôt déroutant !

Plus d’informations à ce sujet sur MSDN : Vue d’ensemble du modèle de contenu des contrôles.

Un autre point intéressant concerne la prise en charge des touches d’accès rapide : il est ainsi possible d’associer une touche de raccourci permettant de donner le focus à un champ de saisie d’un formulaire (par exemple) en spécifiant cette touche dans l’étiquette à l’aide d’un trait de soulignement, puis en définissant le contrôle associé dans la propriété Target :

<Label Target="{Binding ElementName=textBox1}">_Etiquette</Label>

 

Le contrôle TextBlock

Nouveauté de WPF, ce contrôle léger permet d’afficher de petites quantités de texte (environ un paragraphe). Bien qu’il nécessite un peu plus de ressources qu’un Label, il offre cependant plus d’options pour paramétrer la mise en forme du texte (police, taille et style des caractères), aussi bien pour le bloc entier que pour des portions de texte à l’aide « d’éléments inline » simples pour souligner, mettre en gras ou en italique un mot par exemple :

<TextBlock Name="textBlock1" TextWrapping="Wrap">
    Exemple de TextBlock avec du texte en <Bold>Gras</Bold> et en
    <Italic>Italique</Italic> avec quelques mots <Span Foreground="Red">
    en rouge</Span>.
</TextBlock>

 

Exemple de TextBlock

Exemple de TextBlock

 

La mise en forme en XAML est donc assez similaire à celle proposée par le langage HTML. A noter que ce contrôle ne permet pas à l’utilisateur de sélectionner et de copier le texte affiché.

 

A lire aussi sur le sujet :

 

Les contrôles d’édition

 

A première vue, du côté des contrôles d’édition on reste en terrain connu puisque les deux objets proposés par WPF sont les même que ceux présents pour les Windows.Forms : le TextBox et le RichTextBox.

 

Le contrôle TextBox

Ce contrôle permet la saisie de texte non mis en forme. Il est couramment utilisé dans les formulaires par exemple.

Il est ici très similaire à celui des Windows.Forms : La propriété Text est toujours présente, ainsi que d’autres propriétés utiles comme AcceptReturns (pour permettre la saisie de plusieurs lignes de texte) ou encore IsReadOnly si l’on souhaite afficher un texte court en permettant à l’utilisateur de sélectionner et de copier le contenu. Quelques suppléments bienvenus font leur apparition comme la vérification de l’orthographe en temps réel. Pour la saisie de mots de passe, il faudra plutôt regarder du côté de la classe PassWordBox.

<TextBox Name="textBox1">
    Exemple de texte
</TextBox>

 

A lire aussi sur le sujet :

 

Le contrôle RichTextBox

Le contrôle RichTextBox est le contrôle de saisie de texte le plus évolué proposé par WPF. Il reste très similaire à celui présent dans les Windows.Forms et offre donc comme principal avantage par rapport à un TextBox, la gestion de la mise en forme du texte. A cet effet, le contrôle RichTextBox utilise un objet de type FlowDocument en tant que contenu. Cette nouvelle classe de l’espace de nom System.Windows.Documents fait partie de la nouvelle gestion des documents de WPF. Il s’agit en fait un document dynamique qui peut se réorganiser et se redimensionner en temps réel suivant les caractéristiques du conteneur parent. Nous y reviendront un peu plus loin avec les contrôles spécialisés dans l’affichage de ce type de document. Toutefois, le RichTextBox possède quelques limitations et ne propose pas toutes les fonctionnalités que l’on peut retrouver avec d’autres contrôles utilisant les FlowDocument : L’affichage des colonnes, par exemple, n’est pas géré, et les fonctions avancées de recherche et de zoom ne sont pas disponibles.

La documentation MSDN regroupe aussi de nombreuses remarques sur le comportement du contrôle RichTextBox par rapport à certaines actions, comme le copier-coller d’une image par exemple. A noter aussi que l’utilisation de la touche « Entrée » lors de l’édition du texte créera en fait un nouveau paragraphe, de la même façon qu’avec un éditeur visuel HTML. Pour insérer un simple retour à la ligne, il faudra donc utiliser la combinaison MAJ+Entrée.

A lire aussi sur le sujet :

 

Les contrôles dédiés à l’affichage de documents

 

Dans cette dernière partie nous allons nous intéresser d’un peu plus près à la principale nouveauté de WPF concernant l’affichage de textes : La gestion des documents. Le Framework propose ainsi deux catégories : les documents fixes avec la classe FixedDocument, et les documents dynamiques avec la classe FlowDocument. Chacune de ces classes (situées dans System.Windows.Documents) dispose de contrôles dédiés à leur affichage. Bien que le DocumentViewer soit le seul proposé dans la boîte à outils de Visual Studio (mis à part le contrôle RichTextBox), nous verront qu’il en existe aussi d’autres très intéressants.

N’hésitez pas à jetez un oeil à la description de ces documents sur MSDN. Il est difficile au départ d’obtenir ne serait qu’une simple ligne de texte lorsqu’on ne connait pas les différents éléments de base des documents. Sans compter le fait que certains (comme l’élément Run par exemple) sont un peu plus abstraits et difficiles à comprendre que d’autres.

A lire sur le sujet :

 

Le contrôle DocumentViewer

Ce contrôle permet d’afficher les documents fixes de type FixedDocument. Le but de ce type de document est de pouvoir gérer et afficher des données en garantissant un maximum de fidélité avec le rendu obtenu sur un périphérique (pour l’impression notamment). Le document est donc géré page par page avec une disposition fixe des éléments au sein de chaque page.

Le contrôle DocumentViewer permet d’afficher en lecture seule ce type de document et offre plusieurs fonctionnalités comme la possibilité d’effectuer des recherches dans le texte ou de naviguer page par page.

 

FlowDocumentReader, FlowDocumentPageViewer et FlowDocumentScrollViewer

L’équivalent du DocumentViewer pour les documents dynamiques est le contrôle FlowDocumentReader. Celui-ci ne se trouve pas dans la barre d’outils de Visual Studio mais il est possible de l’ajouter manuellement dans le code XAML de la page.

Contrairement aux documents fixes, les documents dynamiques adaptent leur contenu aux préférences de l’utilisateur pour faciliter la lecture des données : il est ainsi possible de modifier la présentation du texte en temps réel, la taille et le style de la police de caractères, etc. Les FlowDocument sont aussi les documents les plus appropriés pour afficher des flux d’informations en cours d’évolution (les logs de traitement de l’application par exemple). Pour optimiser l’affichage suivant la situation rencontrée, le contrôle FlowDocumentReader permet de choisir différentes représentations comme le mode « page par page » ou le mode « à défilement continu ». Pour des raisons de performances, et si le fait de changer de mode en cours d’exécution ne présente pas d’intérêt particulier, il est possible d’utiliser des versions allégées de ce contrôle avec les classes FlowDocumentScrollViewer et FlowDocumentPageViewer.

Le FlowDocumentScrollViewer est sans doute le plus intéressant ici. C’est notamment le contrôle le plus léger après le TextBlock lorsque le texte est trop long pour être contenu dans ce dernier. Il offre un véritable avantage par rapport à ce qui était auparavant proposé avec les Windows.Forms car il s’agit ici d’un contrôle optimisé pour l’affichage de flux en lecture seule, tout en proposant des fonctionnalités intéressantes comme la recherche, le zoom et la capture du texte. Il n’y a donc plus besoin d’utiliser un RichTextBox en lecture seule.

Curieusement, le contrôle FlowDocumentScrollViewer ne propose pas les méthodes habituelles disponibles avec le contrôle ScrollViewer, comme ScrollToEnd par exemple, ce qui se révèle être rapidement très gênant. C’est d’autant plus surprenant que le contrôle ScrollViewer est réellement géré en interne par ce lecteur (stockée dans une variable privée). Toutefois, il possible d’accéder malgré tout à ces méthodes en ajoutant le code suivant récupéré sur le forum MSDN.

 

Récapitulatif

 

Voici un petit tableau récapitulatif résumant les principales caractéristiques des différents contrôles WPF dédié à l’affichage de texte (ou de document). Les données sont ici essentiellement récupérées à partir de la documentation MSDN et des quelques tests réalisés. Elles sont fournies à titre indicatif pour faciliter le choix du contrôle suivant les besoins.

 

Tableau récapitulatif :

Label TextBlock TextBox RichTextBox DocumentViewer FlowDocumentReader FlowDocumentScrollViewer FlowDocumentPageViewer
Accès : Read(R)/Write(W) R R R/W R/W R R R R
Quantité de texte 1 l. 1-5 l.
Ressources requises* ●○○○ ●●○○ ●○○○ ●●●○ ●●●● ●●●● ●●●○ ●●●○
Type de doc. : Fixe/Flow Flow Fixe Flow Flow Flow
Richesse du contenu ●● ●● ●●● ●●● ●●● ●●●
Menu contextuel
Sélection du texte
Colonnes
Recherche
Zoom

* : Réalisé à partir de la documentation MSDN et donné à titre indicatif pour classer les contrôles. Par exemple, un FlowDocumentReader ne va pas consommer deux fois plus de ressources qu’un TextBlock pour un même contenu, mais il est globalement plus lourd en terme de traitement et en consommation de ressources qu’un TextBlock ou qu’un FlowDocumentScrollViewer.

 

Utilisation :

  • Label : Étiquette, texte minimal.
  • TextBlock : Affichage de texte court avec mise en forme basique (informations).
  • TextBox : Saisie de texte sans mise en forme, ou affichage avec prise en charge de la capture du texte.
  • RichTextBox : Saisie de texte avec mise en forme.
  • DocumentViewer : Affichage de texte long avec une composition fixe, destinée à l’impression par exemple.
  • FlowDocumentReader : Affichage de texte long avec une composition dynamique (ex. : flux, logs de l’application, etc.) avec le plus large choix de modes d’affichage.
  • FlowDocumentScrollViewer : Affichage d’un texte long avec une composition dynamique sous forme d’un flux à défilement continu (sans notion de « page »).
  • FlowDocumentPageViewer : Affichage d’un texte long avec une composition dynamique page par page.

 

Conclusion

 

Avec WPF, le .NET Framework a donc considérablement enrichi sa palette d’outils pour afficher et gérer du texte, ainsi que des documents plus complexes. Les possibilités sont donc bien plus nombreuses, mais choisir le contrôle le plus adapté à un besoin précis demande donc un peu plus de temps et d’analyses qu’auparavant.

 

Pour aller plus loin, quelques articles sur MSDN :

 

Categories: Articles Tags: , ,
  1. Pas encore de commentaire
  1. Pas encore de trackbacks