WPF text rendering

Ebben a cikkben, letisztázzuk, miért lesz olykor a szöveg homályosan renderelve a WPF-ben, hogyan lehet ezt javítani, és miként lehet a szövegrenderelést irányítani.

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.

Szövegrenderelés szabályozása

A .NET keretrendszer 4.0-val, a Microsoft eldöntötte, hogy több befolyása lehessen a programozóknak a szövegek renderelésének irányításáról, mindezt a TextOptions, a TextFormattingMode és a TextRenderingMode osztályok bevezetésével. Ezzel lehetőség nyílik a szöveg formázására és irányítására. Legjobban ezt egy példával lehetne bemutatni, úgyhogy tekintsd meg az alábbi kódokat és képernyőképeket, hogy lásd miként befolyásolhatod a szövegrenderelést ezekkel a tulajdonságokkal.

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>

Ahogy látható, a szövegek eredményei eléggé eltérnek attól ahogy kinéznek, ezt főképp így csak különleges esetekben érdemes megváltoztatni.