書式設定されたテキストの描画

このトピックでは、FormattedText オブジェクトの機能の概要について説明します。 このオブジェクトは、Windows Presentation Foundation (WPF) アプリケーションでテキストを描画するための低レベルの制御を提供します。

テクノロジの概要

FormattedText オブジェクトを使用すると、テキスト内の各文字を個別に書式設定できる複数行のテキストを描画できます。 次の例は、複数の形式が適用されているテキストを示しています。

テキスト を使用して表示されます。

書式設定されたテキストを使用する理由

WPF には、画面にテキストを描画するための複数のコントロールが含まれています。 各コントロールは異なるシナリオを対象としており、独自の機能と制限の一覧があります。 一般に、TextBlock 要素は、ユーザー インターフェイス (UI) の簡単な文など、限られたテキストサポートが必要な場合に使用する必要があります。 Label は、最小限のテキストサポートが必要な場合に使用できます。 詳細については、WPFにおけるドキュメント を参照してください。

FormattedText オブジェクトは、Windows Presentation Foundation (WPF) のテキスト コントロールよりも大きなテキスト書式設定機能を提供し、装飾要素としてテキストを使用する場合に便利です。 詳細については、「次のセクション 書式設定されたテキストを Geometryに変換する」を参照してください。

さらに、FormattedText オブジェクトは、テキスト指向の DrawingVisual派生オブジェクトを作成するのに役立ちます。 DrawingVisual は、図形、画像、またはテキストをレンダリングするために使用される軽量の描画クラスです。 詳細については、「DrawingVisuals を使用したヒット テストのサンプル」を参照してください。

FormattedText オブジェクトの使用

書式設定されたテキストを作成するには、FormattedText コンストラクターを呼び出して FormattedText オブジェクトを作成します。 最初の書式設定されたテキスト文字列を作成したら、書式設定スタイルの範囲を適用できます。

テキストを特定の幅に制限するには、MaxTextWidth プロパティを使用します。 テキストは、指定した幅を超えないように自動的に折り返されます。 MaxTextHeight プロパティを使用して、テキストを特定の高さに制限します。 テキストに省略記号 "..." が表示されます。指定した高さを超えるテキストの場合は 〗。

1 つ以上の文字に複数の書式設定スタイルを適用できます。 たとえば、SetFontSize メソッドと SetForegroundBrush メソッドの両方を呼び出して、テキストの最初の 5 文字の書式を変更できます。

次のコード例では、FormattedText オブジェクトを作成し、テキストにいくつかの書式設定スタイルを適用します。

protected override void OnRender(DrawingContext drawingContext)
{
    string testString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor";

    // Create the initial formatted text string.
    FormattedText formattedText = new FormattedText(
        testString,
        CultureInfo.GetCultureInfo("en-us"),
        FlowDirection.LeftToRight,
        new Typeface("Verdana"),
        32,
        Brushes.Black);

    // Set a maximum width and height. If the text overflows these values, an ellipsis "..." appears.
    formattedText.MaxTextWidth = 300;
    formattedText.MaxTextHeight = 240;

    // Use a larger font size beginning at the first (zero-based) character and continuing for 5 characters.
    // The font size is calculated in terms of points -- not as device-independent pixels.
    formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5);

    // Use a Bold font weight beginning at the 6th character and continuing for 11 characters.
    formattedText.SetFontWeight(FontWeights.Bold, 6, 11);

    // Use a linear gradient brush beginning at the 6th character and continuing for 11 characters.
    formattedText.SetForegroundBrush(
                            new LinearGradientBrush(
                            Colors.Orange,
                            Colors.Teal,
                            90.0),
                            6, 11);

    // Use an Italic font style beginning at the 28th character and continuing for 28 characters.
    formattedText.SetFontStyle(FontStyles.Italic, 28, 28);

    // Draw the formatted text string to the DrawingContext of the control.
    drawingContext.DrawText(formattedText, new Point(10, 0));
}

Protected Overrides Sub OnRender(ByVal drawingContext As DrawingContext)
    Dim testString As String = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor"

    ' Create the initial formatted text string.
    Dim formattedText As New FormattedText(testString, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, New Typeface("Verdana"), 32, Brushes.Black)

    ' Set a maximum width and height. If the text overflows these values, an ellipsis "..." appears.
    formattedText.MaxTextWidth = 300
    formattedText.MaxTextHeight = 240

    ' Use a larger font size beginning at the first (zero-based) character and continuing for 5 characters.
    ' The font size is calculated in terms of points -- not as device-independent pixels.
    formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5)

    ' Use a Bold font weight beginning at the 6th character and continuing for 11 characters.
    formattedText.SetFontWeight(FontWeights.Bold, 6, 11)

    ' Use a linear gradient brush beginning at the 6th character and continuing for 11 characters.
    formattedText.SetForegroundBrush(New LinearGradientBrush(Colors.Orange, Colors.Teal, 90.0), 6, 11)

    ' Use an Italic font style beginning at the 28th character and continuing for 28 characters.
    formattedText.SetFontStyle(FontStyles.Italic, 28, 28)

    ' Draw the formatted text string to the DrawingContext of the control.
    drawingContext.DrawText(formattedText, New Point(10, 0))
End Sub

フォント サイズの測定単位

Windows Presentation Foundation (WPF) アプリケーションの他のテキスト オブジェクトと同様に、FormattedText オブジェクトはデバイスに依存しないピクセルを測定単位として使用します。 ただし、ほとんどの Win32 アプリケーションでは、測定単位としてポイントが使用されます。 Windows Presentation Foundation (WPF) アプリケーションで表示テキストをポイント単位で使用する場合は、デバイスに依存しない単位 (単位あたり 1/96 インチ) をポイントに変換する必要があります。 次のコード例は、この変換を実行する方法を示しています。

// The font size is calculated in terms of points -- not as device-independent pixels.
formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5);

' The font size is calculated in terms of points -- not as device-independent pixels.
formattedText.SetFontSize(36 * (96.0 / 72.0), 0, 5)

書式設定されたテキストをジオメトリに変換する

書式設定されたテキストを Geometry オブジェクトに変換して、他の種類の視覚的に興味深いテキストを作成できます。 たとえば、テキスト文字列のアウトラインに基づいて Geometry オブジェクトを作成できます。

線形グラデーション ブラシ を使用してテキストアウトラインを する

次の例では、変換されたテキストのストローク、塗りつぶし、強調表示を変更して、興味深い視覚効果を作成するいくつかの方法を示します。

塗りとストロークの色が異なるテキスト

ストローク にイメージ ブラシを適用したテキスト

を強調表示

テキストを Geometry オブジェクトに変換すると、テキストは文字のコレクションではなくなります。テキスト文字列内の文字を変更することはできません。 ただし、ストロークと塗りつぶしのプロパティを変更することで、変換されたテキストの外観に影響を与えることができます。 ストロークは、変換したテキストのアウトラインを参照します。塗りつぶしは、変換したテキストのアウトラインの内側の領域を参照します。 詳細については、「アウトラインテキストを作成」を参照してください。

書式設定されたテキストを PathGeometry オブジェクトに変換したり、そのオブジェクトを使用してテキストを強調表示したりすることもできます。 たとえば、PathGeometry オブジェクトにアニメーションを適用して、書式設定されたテキストのアウトラインにアニメーションを適用できます。

次の例は、PathGeometry オブジェクトに変換された書式設定されたテキストを示しています。 アニメーション化された楕円は、レンダリングされたテキストのストロークのパスに従います。

球をのパスジオメトリに従って移動する
テキストの経路ジオメトリに従う球

詳細については、「方法: テキストの PathGeometry アニメーションを作成する」を参照してください。

書式設定されたテキストを PathGeometry オブジェクトに変換すると、その他の興味深い用途を作成できます。 たとえば、ビデオをクリップして内部に表示することができます。

のパス ジオメトリにビデオが表示される

Win32 の移行

テキストを描画するための FormattedText の機能は、Win32 DrawText 関数の機能に似ています。 Win32 API から移行する開発者向けに、次の表に、Win32 DrawText フラグと Windows Presentation Foundation (WPF) のおおよその同等のフラグを示します。

こちらも参照ください

• FormattedText
• WPF のドキュメント
• WPF での 文字体裁
• アウトラインテキストを作成する
• 方法: テキストの PathGeometry アニメーションを作成する方法