Rendering del testo in WPF

In questo articolo parleremo del motivo per cui, a volte, il testo con WPF viene renderizzato un po' sfocato, come è stato successivamente corretto e come è possibile controllare il rendering del testo manualmente.

Come già accennato in questo tutorial, WPF gestisce molte operazioni in autonomia, se comparato con altri UI frameworks come WinForms, che usa invece l'API di Windows per molte, molte cose. Questo diventa chiaro quando è il momento di renderizzare il testo - WinForms usa la GDI API di Windows, mentre WPF ha una sua implementazione per la renderizzazione del testo, per meglio supportare le animazioni, così come l'indipendenza dai dispositivi che è la natura di WPF.

Sfortunatamente, questo ha portato a una renderizzazione del testo leggermente sfocata, in particolare con dimensioni piccole del font. Questo per un po' di tempo era in effetti un grande problema per i programmatori WPF, ma fortunatamente, Microsoft ha effettuato molti miglioramenti al motore di rendering del testo di WPF nella versione 4.0 di .NET framework. Questo significa che se stai usando questa versione o le successive, il tuo testo dovrebbe essere al limite del pixel perfect.

Controllare il rendering del testo

Con .NET Framework 4.0 Microsoft ha anche deciso di dare maggiore controllo del rendering del testo ai programmatori, introducendo la classe TextOptions con le proprietà TextFormattingMode e TextRenderingMode. Questo ti permette di decidere specificatamente come il testo dovrebbe essere formattato e renderizzato a livello di controllo. Questo può essere meglio illustrato con un esempio, quindi dai un occhiata al codice e agli screenshots che seguono per vedere come puoi modificare il rendering del testo con queste proprietà

TextFormattingMode

Usando la proprietà TextFormattingMode, puoi decidere quale algoritmo utilizzare per la formattazione del testo. Puoi scegliere tra Ideal (il valore di default) e Display. Normalmente questa proprietà rimarrà invariata, dato che Ideal sarà il più adatto nella maggior parte delle situazioni, ma nei casi dove avrai bisogno di renderizzare del testo molto piccolo, Display potrebbe portare a un risultato migliore. Qui un esempio dove si può notare la differenza (seppur molto sottile):

<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 proprietà TextRenderingMode permette di controllare quale algoritmo di antialiasing viene utilizzato nella renderizzazione del testo. Ha la massima efficacia in combinazione con l'impostazione Display della proprietà TextFormattingMode, che useremo in questo esempio per illustrare le differenze:

<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>

Come puoi vedere, il testo risultante differisce di parecchio nell'aspetto e ancora una volta, questa impostazione dovrebbe essere cambiata solo in circostanze speciali.