WPF text rendering

完全なこの記事ではWPFで何故テキストが時々ぼやけてレンダリングされるか、どのように後で修正するのか、そしてどのようにテキストレンダリングをコントロールできるのか、を議論することになります。

既にこのチュートリアルで述べているように、Windows APIを多く使うWinFormのような他のUIと比べて、WPFは多くのことを自身で行います。テキストレンダリングについても、これははっきりしています。WInFormsはWindowsのGDI APIを使う一方、WPFは自身のテキストレンダリングを実装していて、アニメーションやWPFのデバイスに依存しない性質をより良くサポートしています。

不運なことに、これはテキストがレンダーされる際に小さなボケを引き起こします。小さなフォントの場合は特に。これはWPFプログラマにとってどちらかといえば大きな問題でしたが、幸いマイクロソフトは .NET framework 4.0以降のバージョンでテキストレンダリングエンジンを大きく改善しました。このバージョン以降を使えばテキストはほぼピクセル精度で問題ありません。

テキストレンダリングの制御

.NET framework 4.0でマイクロソフトは TextOptions クラスの TextFormattingMode と TextRenderingMode プロパティを導入してテキストレンダリングをもっとプログラマが制御できるようにしました。これで、コントロールレベルでどのように書式化してレンダリングするかを具体的に決めることが出来ます。これはおそらく例で説明するのが良いので、下記のコードとスクリーンショットでこれらのプロパティがどのようにテキストレンダリングに影響するのかを見て下さい。

テキスト書式化モード

TextFormattingModeプロパティを使うと、テキストの書式化にどのアルゴリズムを使うのか決めることが出来ます。Ideal (デフォルト) か Display を選べます。通常はIdealセッティングが良いので、このプロパティは触らずにそのままにしておきますが、大変小さいテキストをレンダリングする必要がある場合はDisplayセッティングが良い結果をもたらすことがあります。以下はこの違いを示す例です（ただし非常に微妙です）。

<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 プロパティはテキストレンダリングで使うアンチエイリアシングアルゴリズムを選びます。これは TextFormattingMode プロパティの Display セッティングとの組み合わせで最大の効果を得ることが出来ます。この例でその違いを説明します。

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

見ればわかるように、結果の文字列は見映がかなり違っています。繰り返しますが、特殊な状況ではこの設定を変えるべきです。