WPF text rendering

In this article, we'll be discussing why text is sometimes rendered more blurry with WPF, how this was later fixed and how you can control text rendering yourself.

Ahogy már meg volt említve ebbe a bemutatóba, WPF önmagában több dologra képes mint a többi UI keretrendszerei például, WinForms, ami használni fogja a Windows-t. API sokra, sok dolgok. Ez mellett le tisztázza mikor a szöveg átalakításról van szó - WinForms használja a GDI API-t Window-ból, miközben WPF-nek megvan a saját szöveg feldolgozó megvalósítása, hogy jobban támogassa az animációt emellett a WPF eszközök függetlensége.

Sajnos a WPF használata kezdetben a szöveget kissé elmosódottá tette, különösen kis méretű karaktereknél. A WPF programozók számára ez sokáig komoly gondot okozott, de szerencsére a Microsoft cég a .NET keretrendszer 4.0 verziójában sokat javított a szöveg megjelenítő motoron. Ennek eredményeképpen a 4.0, vagy magasabb verziószámú keretrendszer használatával a szövegeink majdnem pixel tökéletesek lesznek.

Controlling text rendering

With .NET framework 4.0, Microsoft also decided to give more control of text rendering to the programmer, by introducing the TextOptions class with the TextFormattingMode and TextRenderingMode properties. This allows you to specifically decide how text should be formatted and rendered on a control level. This is probably best illustrated with an example, so have a look at the code and the screenshots below to see how you can affect text rendering with these properties.

TextFormattingMode

Using the TextFormattingMode property, you get to decide which algorithm should be used when formatting the text. You can choose between Ideal (the default value) and Display. You would normally want to leave this property untouched, since the Ideal setting will be best for most situations, but in cases where you need to render very small text, the Display setting can sometimes yield a better result. Here's an example where you can see the difference (although it's very subtle):

<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 TextRenderingMode tulajdonság irányítást ad hogy milyen térbeli simítást algoritmust használjon mikor feldolgozza a szöveget. Legnagyobb hatása a Display beállítás kombinálva a TextFormattingMode tulajdonsággal, amit használni fogunk ebbe a példában hogy illusztráljuk a különbségeket.

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

As you can see, the resulting text differs quite a bit in how it looks and once again, you should mainly change this in special circumstances.