Renderizado de texto WPF

En este artículo, analizaremos por qué el texto a veces se vuelve más borroso con WPF, cómo este luego fue solucionado y cómo puedes controlar por ti mismo el procesamiento del texto.

Como ya se mencionó en este tutorial, WPF hace muchas más cosas por sí mismo en comparación con otros marcos de interfaz de usuario como WinForms, que utilizará la API de Windows para muchas, muchas cosas. Esto también es así cuando se trata de renderizar texto: WinForms usa la API de GDI desde Windows, mientras que WPF tiene su propia implementación para representar texto, para admitir mejor las animaciones, así como independizar WPF de la naturaleza del dispositivo.

Desafortunadamente, esto hizo que el texto se volviera un poco borroso, especialmente en tamaños de letra pequeños. Este fue un problema bastante grande para los programadores de WPF por algún tiempo, pero afortunadamente, Microsoft realizó muchas mejoras en el motor de representación de texto de WPF en .NET framework versión 4.0. Esto significa que si está utilizando esta versión o superior, su texto debería ser casi tan bueno como el píxel perfecto.

Controlando el procesamiento de textos

Con .NET Framework 4.0, Microsoft también decidió dar más control de la representación de texto al programador, al introducir la clase TextOptions con el TextFormattingMode y TextRenderingMode propiedades. Esto le permite decidir específicamente cómo se debe formatear y representar el texto en un nivel de control. Esto probablemente se ilustra mejor con un ejemplo, así que eche un vistazo al código y las capturas de pantalla a continuación para ver cómo puede afectar el procesamiento de texto con estas propiedades.

Modo de Formateo de Texto

Con la propiedad TextFormattingMode, puede decidir qué algoritmo se debe usar al formatear el texto. Puede elegir entre Ideal (el valor predeterminado) y Display (Mostrar). Normalmente, querrá dejar intacta esta propiedad, ya que la configuración Ideal será la mejor para la mayoría de las situaciones, pero en los casos en que necesite hacer un texto muy pequeño, la configuración de Visualización a veces puede producir un mejor resultado. Aquí hay un ejemplo donde puedes ver la diferencia (aunque es muy 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

La propiedad TextRenderingMode te da control sobre qué algoritmo de antialiasing se usa a la hora de renderizar el texto. Tiene un mayor efecto en combinación con el ajuste Display para la propiedad TextFormattingMode, que usaremos en este ejemplo para ilustrar las diferencias:

<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 puede ver, el texto resultante difiere bastante en apariencia y, una vez más, debería cambiarlo principalmente en circunstancias especiales.