Rendu du texte en WPF

Dans cet article, nous allons voir pourquoi les textes ont parfois un rendu plus flou avec WPF, comment cela a été corrigé par la suite et comment vous pouvez vous-même contrôler le rendu du texte.

Comme déjà mentionné dans ce tutoriel, WPF contrôle bien plus de choses comparé à d'autres frameworks graphiques comme WinForms, Qui, lui, utilise L'API Windows pour beaucoup d'éléments. C'est aussi le cas quand on parle du rendu des textes - Winforms utilise la GDI API de Windows, alors que WPF a sa propre implémentation de rendu du texte, supportant mieux les animations de manière a être en accord avec la nature "indépendante" du système WPF.

Malheureusement, cela a amené le texte a avoir un rendu moins net, particulièrement pour les polices de petites taille. Ce fut plutôt un gros problème pour les développeurs, mais heureusement, Microsoft a implémenté de nombreuses améliorations dans le moteur de rendu du texte WPF du framework .NET 4.0. Cela veut dire que si vous utilisez cette version ou une plus récente, vos textes seront presque parfaits au pixel près.

Contrôler le rendu du texte

Avec .NET 4.0, Microsoft a aussi décidé de donner plus de contrôle au programmeurs au niveau du rendu des textes, en introduisant la classe TextOptions avec les propriétés TextFormattingMode et TextRenderingMode. Cela vous permet de choisir comment le texte doit être formaté et rendu au niveau du contrôle lui-même. Comme cela sera certainement plus explicite avec un exemple, jetez un œil au code et aux captures ci-après, vous pourrez voir comment le rendu du texte est affecté par ces propriétés.

TextFormattingMode

En utilisant la propriété TextFormattingMode, vous décidez de l’algorithme utilisé pour formater le texte. Vous pouvez choisir entre Ideal (Par défaut) et Display. En principe vous ne toucherez pas à cette propriété, car Ideal sera le meilleur choix dans la plupart des situations, mais au cas où vous auriez besoin de rendre un très petit texte, alors le paramètre Display peut parfois donner un meilleur résultat. Voici un exemple où vous pouvez voir la différence (même si elle est ténue):

<Window x:Class="WpfTutorialSamples.Control_concepts.TextFormattingModeSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextFormattingModeSample" Height="200" Width="400">
    <StackPanel Margin="10">
        <Label TextOptions.TextFormattingMode="Ideal" FontSize="9">TextFormattingMode.Ideal, small text</Label>
        <Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Display, small text</Label>
        <Label TextOptions.TextFormattingMode="Ideal" FontSize="20">TextFormattingMode.Ideal, large text</Label>
        <Label TextOptions.TextFormattingMode="Display" FontSize="20">TextFormattingMode.Display, large text</Label>
    </StackPanel>
</Window>

TextRenderingMode

La propriété TextRenderingMode vous permet de choisir quel algorithme d'anti-crénelage sera utilisé pour le rendu du texte. Les effets sont plus notables en combinaison de la valeur Display de la propriété TextFormattingMode, que nous allons utiliser dans cet exemple pour illustrer les différences :

<Window x:Class="WpfTutorialSamples.Control_concepts.TextRenderingModeSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextRenderingModeSample" Height="300" Width="400">
    <StackPanel Margin="10" TextOptions.TextFormattingMode="Display">
        <Label TextOptions.TextRenderingMode="Auto" FontSize="9">TextRenderingMode.Auto, small text</Label>
        <Label TextOptions.TextRenderingMode="Aliased" FontSize="9">TextRenderingMode.Aliased, small text</Label>
        <Label TextOptions.TextRenderingMode="ClearType" FontSize="9">TextRenderingMode.ClearType, small text</Label>
        <Label TextOptions.TextRenderingMode="Grayscale" FontSize="9">TextRenderingMode.Grayscale, small text</Label>
        <Label TextOptions.TextRenderingMode="Auto" FontSize="18">TextRenderingMode.Auto, large text</Label>
        <Label TextOptions.TextRenderingMode="Aliased" FontSize="18">TextRenderingMode.Aliased, large text</Label>
        <Label TextOptions.TextRenderingMode="ClearType" FontSize="18">TextRenderingMode.ClearType, large text</Label>
        <Label TextOptions.TextRenderingMode="Grayscale" FontSize="18">TextRenderingMode.Grayscale, large text</Label>
    </StackPanel>
</Window>

Comme vous pouvez le constater, le résultat diffère très peu visuellement et encore une fois, vous ne voudrez sûrement changer ce paramètre que dans des circonstances spéciales.