Renderitzat de text WPF

En aquest article, analitzarem per què el text a vegades es torna més borrós amb WPF, com aquest després va ser solucionat i com pots controlar per tu mateix el processament del text.

Com ja es va esmentar en aquest tutorial, WPF fa moltes més coses per si mateix en comparació amb altres marcs d'interfície d'usuari com WinForms, que utilitzarà la API de Windows per a moltes, moltes coses. Això també és així quan es tracta de renderitzar text: WinForms usa la API de GDI des de Windows, mentre que WPF té la seva pròpia implementació per a representar text, per a admetre millor les animacions, així com independitzar WPF de la naturalesa del dispositiu.

Desafortunadament, això va fer que el text es tornés una mica borrós, especialment en grandàries de lletra petits. Aquest va ser un problema bastant gran per als programadors de WPF per algun temps, però afortunadament, Microsoft va realitzar moltes millores en el motor de representació de text de WPF en .NET framework versió 4.0. Això significa que si està utilitzant aquesta versió o superior, el seu text hauria de ser gairebé tan bo com el píxel perfecte.

Controlant el processament de textos

Amb .NET Framework 4.0, Microsoft també va decidir donar més control de la representació de text al programador, en introduir la classe TextOptions amb el TextFormattingMode i TextRenderingMode propietats. Això li permet decidir específicament com s'ha de formatar i representar el text en un nivell de control. Això probablement s'il·lustra millor amb un exemple, així que doni un cop d'ull al codi i les captures de pantalla a continuació per a veure com pot afectar el processament de text amb aquestes propietats.

TextFormattingMode

Amb la propietat TextFormattingMode, pot decidir quin algorisme s'ha d'usar en formatar el text. Pot triar entre Ideal (el valor predeterminat) i Display. Normalment, voldrà deixar intacta aquesta propietat, ja que la configuració Ideal serà la millor per a la majoria de les situacions, però en els casos en què necessiti fer un text molt petit, la configuració de Visualització a vegades pot produir un millor resultat. Aquí hi ha un exemple on pots veure la diferència (encara que és molt subtil):

<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 propietat TextRenderingMode et dóna control sobre quin algorisme de antialiasing s'usa a l'hora de renderitzar el text. Té un major efecte en combinació amb l'ajust Display per a la propietat TextFormattingMode, que usarem en aquest exemple per a il·lustrar les diferències:

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

Com pot veure, el text resultant difereix bastant en aparença i, una vegada més, hauria de canviar-lo principalment en circumstàncies especials.