WPF Text Rendering

Dieser Artikel behandelt das Verhalten des Rendering-Prozesses und warum der Text durch WPF manchmal verschwommen aussieht, wie dieser Fehler in späteren Versionen von WPF verbessert wurde und wie man das Text-Rendering selbst kontrollieren kann.

Wie schon beschrieben, übernimmt WPF viele Aufgaben, um die wir uns mit UI-Frameworks wie WinForms noch selber kümmern mussten und die auf die Windows API für die verschiedensten Funktionen zugreifen. So rendert WinForms den Text unter anderem mit der GDI API von Windows, WPF hingegen nutzt den eigens implementierten Rendering-Algorithmus. Dies hat zur Folge, dass unter anderem Animationen besser unterstützt werden, aber auch die Geräte-Abhängigkeiten verbessert wird.

Dies führte leider dazu, dass der Text etwas unscharf dargestellt wurde, besonders bei kleinen Schriftgrößen. Dies war für WPF-Programmierer eine Zeitlang ein ziemlich großes Problem, aber zum Glück hat Microsoft viele Verbesserungen an der WPF-Text-Rendering-Engine in .NET Framework Version 4.0 vorgenommen. Das heißt, wenn Sie diese Version oder höher verwenden, sollte Ihr Text fast pixel-perfekt sein.

Text-Rendering steuern

Mit dem .NET-Framework 4.0 hat Microsoft außerdem beschlossen, dem Programmierer mehr Kontrolle über die Textwiedergabe zu geben, indem die Klasse TextOptions mit den Eigenschaften TextFormattingMode und TextRenderingMode eingeführt wurde. Auf diese Weise können Sie gezielt entscheiden, wie der Text auf Steuerelement-Ebene formatiert und gerendert werden soll. Dies ist wahrscheinlich am besten mit einem Beispiel illustriert, also schauen Sie sich den Code und die Screenshots unten an, um zu sehen, wie Sie das Rendern von Text mit diesen Eigenschaften beeinflussen können.

TextFormattingMode

Mit der Eigenschaft TextFormattingMode entscheiden Sie, welcher Algorithmus beim Formatieren des Textes verwendet werden soll. Sie können zwischen Ideal (Standardwert) und Display wählen. Normalerweise möchten Sie diese Eigenschaft unverändert lassen, da die Einstellung Ideal für die meisten Situationen am besten ist, aber in Fällen, in denen Sie sehr kleinen Text rendern müssen, kann die Einstellung Display manchmal ein besseres Ergebnis liefern. Hier ist ein Beispiel, wo Sie den Unterschied sehen können (obwohl er sehr subtil ist):

<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

Die Eigenschaft TextRenderingMode gibt Ihnen die Kontrolle darüber, welcher Antialiasing-Algorithmus beim Rendern von Text verwendet wird. Sie hat den größten Effekt in Kombination mit der Einstellung Display für die Eigenschaft TextFormattingMode, die wir in diesem Beispiel verwenden werden, um die Unterschiede zu verdeutlichen:

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

Wie Sie sehen können, unterscheidet sich der resultierende Text sehr stark in seinem Aussehen, und Sie sollten dies vor allem bei speziellen Gegebenheiten ändern.