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

A TextFormattingMode tulajdonságot használva dönthetünk arról, hogy melyik algoritmust használjuk szöveg formázásakor. Az Ideal (alapértelmezett érték) és Display értékek közül választhatunk. Általánosságban ezt a tulajdonságot változatlanul hagyjuk, mivel az Ideal beállítás jobban alkalmazható a legtöbb esetben - bár kisebb méretű szövegek megjelenítésekor a Display beállítás időnként jobb eredményt adhat. A következő példában látható a két beállítás különbsége (bár ez meglehetősen apró):

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