Le contrôle TextBlock - Formatage inline

Dans le dernier article, nous avons vu la fonction primaire du contrôle TextBlock : Afficher un texte simple et le faire retourner à la ligne si nécessaire. Nous avons même utilisé des couleurs différentes de celle par défaut pour afficher le texte, mais comment faire si vous vouliez faire plus que simplement définir une couleur statique pour tout le texte du TextBlock ?

Heureusement, le contrôle TextBlock supporte le contenu intégré. Ces petits éléments ressemblant à des contrôles héritent tous de la classe Inline, ce qui signifie qu'ils peuvent être rendus de façon intégrée, en tant qu'élément d'un texte plus grand. Au moment de l'écriture de ce document, les éléments supportés incluent AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span, et Underline. Dans les exemples suivants, nous verrons chacun d'eux.

Bold, Italic et Underline

Ce sont probablement les types les plus simples des éléments intégrés. Leurs noms sont explicatifs, mais nous allons tout de même vous donner un rapide exemple de la façon de les utiliser :

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockInlineSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockInlineSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			TextBlock with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> text.
		</TextBlock>
    </Grid>
</Window>

De façon proche du HTML, vous placez votre texte dans une balise Bold pour obtenir un texte en gras etc. Ceci rend facile la création et l'affichage de texte divers dans vos applications.

Ces trois balises sont juste des classes filles de l'élément Span, chacune modifiant une propriété spécifique de l'élément Span afin de créer l'effet désiré. Par exemple, la balise Bold spécifie la propriété FontWeight, la balise Italic spécifie la propriété FontStyle, etc.

LineBreak

Il suffit d'insérer un saut de ligne dans le texte. Merci de regarder dans le chapitre précédent pour avoir un exemple d'utilisation de l'élément LineBreak

Hyperlink

L'élément Hyperlink permet d'afficher des liens dans un texte. Il s'affiche par défaut dans un style correspondant au thème de Windows, qui est la plupart du temps un texte bleu sous-ligné avec un effet de surbrillance rouge et un curseur en forme de main quand la souris passe dessus. Il est possible de définir l'URL vers lequel le lien doit pointer grâce à la propriété NavigateUri. Voici un exemple :

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockHyperlinkSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockHyperlinkSample" Height="100" Width="300">
	<Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This text has a <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="https://www.google.com">link</Hyperlink> in it.
		</TextBlock>
	</Grid>
</Window>

L'élément Hyperlink est aussi utilisé dans les contrôles Page de WPF, où il permet de naviguer entre les pages. Dans ce cas, il n'est pas nécessaire de gérer l'événement RequestNavigate comme nous l'avons fait dans l'exemple. Mais pour ouvrir une URL externe depuis une application WPF classique, nous avons besoin de l'aide de cet événement ainsi que de la classe Process. Nous souscrivons à l'événement RequestNavigate qui nous permet d'ouvrir le lien pointé par l'URL dans le navigateur par défaut de l'utilisateur avec une simple gestion d'événement dans le code-behing comme ceci :

private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
	System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);
}

Run

L'élément Run permet d'afficher une chaine de caractère en utilisant les mêmes propriétés que l'élément Span. Mais contrairement à l'élément Span qui peut contenir d'autres éléments de type inline, l'élément Run ne peut contenir que du texte. Celà rend l'élément Span plus flexible et ça en fait le choix le plus logique dans la plupart des cas.

Span

L'élément Span n'a pas d'affichage particulier par défaut mais il permet d'attribuer presque n'importe quelle propriété à un texte, tels que la taille, la police d'écriture, le couleur de fond, la couleur du texte, etc. La chose bien avec l'élément Span, c'est qu'il peut contenir d'autres éléments de type inline. Il devient donc facile de créer des combinaisons complexes de textes et de styles. Dans l'exemple suivant, j'ai utilisé beaucoup d'éléments Span pour vous montrer quelques unes des nombreuses possibilités offertes par l'imbrication d'éléments Span.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSpanSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSpanSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This <Span FontWeight="Bold">is</Span> a
			<Span Background="Silver" Foreground="Maroon">TextBlock</Span>
			with <Span TextDecorations="Underline">several</Span>
			<Span FontStyle="Italic">Span</Span> elements,
			<Span Foreground="Blue">
				using a <Bold>variety</Bold> of <Italic>styles</Italic>
			</Span>.
		</TextBlock>
	</Grid>
</Window>

Donc commme vous pouvez le voir, si aucun des autres éléments ne correspondent à votre situation ou si vous voulez juste un canvas vierge pour commencer à formater votre texte, l'élément Span est un très bon choix.

Formater du texte depuis le C#/Code-Behind

Comme vous pouvez le voir, formater du texte en XAML est très simple. Mais dans certains cas, vous pourriez préférer ou même avoir besoin de la faire depuis votre code C#. C'est un peu plus fastidieux, mais voici un exemple de comment il est possible de le faire :

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockCodeBehindSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockCodeBehindSample" Height="100" Width="300">
    <Grid></Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class TextBlockCodeBehindSample : Window
	{
		public TextBlockCodeBehindSample()
		{
			InitializeComponent();
			TextBlock tb = new TextBlock();
			tb.TextWrapping = TextWrapping.Wrap;
			tb.Margin = new Thickness(10);
			tb.Inlines.Add("An example on ");
			tb.Inlines.Add(new Run("the TextBlock control ") { FontWeight = FontWeights.Bold });
			tb.Inlines.Add("using ");
			tb.Inlines.Add(new Run("inline ") { FontStyle = FontStyles.Italic });
			tb.Inlines.Add(new Run("text formatting ") { Foreground = Brushes.Blue });
			tb.Inlines.Add("from ");
			tb.Inlines.Add(new Run("Code-Behind") { TextDecorations = TextDecorations.Underline });
			tb.Inlines.Add(".");
			this.Content = tb;
		}
	}
}

C'est super d'avoir la possibilité de le faire, et ça peut être nécessaire de le faire de cette manière dans certaines situations, mais cet exemple va certainement vous faire apprécier le XAML encore plus.