Kontrola rysowania tekstu

W tym artykule omówimy dlaczego w aplikacjach WPF tekst czasem się rozmazuje, jak to naprawiono oraz jak samemu kontrolować renderowania tekstu.

Jak już wspomniano w tym poradniku, WPF wykonuje dużo więcej pracy samodzielnie w porównaniu do innych frameworków, na przykład WinForms, który wykorzystuje API Windows do bardzo wielu rzeczy. Wiadomo również jak jest jeśli chodzi o renderowanie tekstu: WinForms używają API GDI od Windowsa, podczas gdy WPF posiada własny silnik rysujacy tekst, który daje lepsze wsparcie dla animacji oraz zwiększa przenośność WPF między urządzeniami.

Niestety doprowadziło to do rozmazywania tekstu, w szczególności przy małych rozmiarach czcionki. Był to dość duży problem dla programistów WPF przez pewien czas, całe szczęście jednak Microsoft dodał wiele poprawek do silnika rysującego tekst w wersji 4.0 .Net Framework. Znaczy to tyle, że jeśli pracujesz z tą wersją lub wyższą, to napisy powinny być niemalże perfekcyjne ostre.

Kontrola rysowania tekstu

Wraz z wersją 4.0 .Net Framework Microsoft dodał możliwość większej kontroli nad renderowaniem tekstu poprzez wprowadzenie klasy TextOptions wraz z właściwościami TextFormattingMode i TextRenderingMode, które pozwolą Ci zdecydować w jaki sposób tekst ma być sformatowany i narysowany z poziomu kontrolki. Najlepiej zobrazować to za pomocą przykładu, więc spójrz na poniższy kod oraz zrzut ekranu aby zobaczyć jak wpływają powyższe właściwości na renderowanie tekstu.

TextFormattingMode

Używając właściwości TextFormattingMode możesz zdecydować który algorytm ma być użyty do formatowania tekstu. Możesz wybrać pomiędzy Ideal (domyślna wartość ) oraz Display. Właściwość tę raczej zostawiamy nietkniętą ponieważ wartość Ideal (idealna) jest najlepsza w większości przypadków. Jednak kiedy potrzeba narysować tekst pisany bardzo mała czcionką wartość Display (wyświetlacz) może poprawić rezultat. Poniżej znajduje się przykład, na którym można zobaczyć różnice, subtelną ale widoczną.

<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

Właściwość TextRenderingMode pozwala określić który algorytm powinien zostać użyty do wygładzania tekstu (antyaliasing). Największe różnice pozwala ona zauważyć w połączeniu z ustawieniem wartości Display dla właściwości TextFormattingMode, co zaprezentujemy w przykładzie poniżej:

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

Więc jak widzisz, efekt końcowy różni się już dużo bardziej niż poprzednio, jednak i tę właściwość powinieneś zmieniać tylko w przypadku wyraźnej potrzeby.