Renderização de texto no WPF

Neste artigo, discutiremos por que o texto às vezes fica mais borrado com o WPF, como isso foi corrigido posteriormente e como você pode controlar você mesmo a renderização do texto.

Como já mencionado neste tutorial, o WPF faz muito mais coisas sozinho quando comparado a outros frameworks de interface do usuário como o WinForms, que usará API Windows para muitas, muitas coisas. Isso também fica claro quando se trata da renderização de texto - o WinForms usa a API GDI do Windows, enquanto o WPF tem sua própria implementação de renderização de texto, para suportar melhor as animações, bem como a natureza independente do dispositivo do WPF.

Infelizmente, isso fez o texto a ficar um pouco desfocado, especialmente em tamanhos de fonte pequenos. Este foi um grande problema para os programadores do WPF por algum tempo, mas, felizmente, a Microsoft fez muitas melhorias no mecanismo de renderização de texto do WPF no .NET Framework versão 4.0. Isso significa que, se você estiver usando essa versão ou superior, seu texto deve ser quase tão bom quanto um pixel perfeito.

Controlando a renderização do texto

Com o .NET Framework 4.0, a Microsoft também decidiu dar mais controle de renderização de texto ao programador, introduzindo a classe TextOptions com as propriedades TextFormattingMode e TextRenderingMode. Isso permite que você decida especificamente como o texto deve ser formatado e renderizado em no nível do controle. Isto é provavelmente mais bem ilustrado com um exemplo, então dê uma olhada no código e nas imagens abaixo para ver como você pode afetar a renderização de texto com essas propriedades.

TextFormattingMode

Ao usar a propriedade TextFormattingMode, você decide qual algoritmo deve ser usado ao formatar o texto. Você pode escolher entre Ideal (o valor padrão) e Display. Normalmente você vai preferir não mexer nesta propriedade, uma vez que a configuração Ideal será a melhor para a maioria das situações, mas nos casos em que você precisa renderizar um texto muito pequeno, a configuração Display pode, às vezes, produzir um resultado melhor. Aqui está um exemplo onde você pode ver a diferença (embora seja muito sutil):

<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

A propriedade TextRenderingMode permite controlar qual algoritmo de antialiasing é usado ao renderizar texto. Tem o maior efeito em conjunto com a configuração Display da propriedade TextFormattingMode, que usaremos neste exemplo para ilustrar as diferenças:

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

Como você pode ver, o texto resultante difere um pouco na aparência e, mais uma vez, você deve mudar isso principalmente em circunstâncias especiais.