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

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

このトピックは、次のセクションで構成されています。

• テクノロジの概要
• FormattedText オブジェクトの使用
• Win32 の移行
• 関連トピック

テクノロジの概要

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

FormattedText メソッドを使用して表示されたテキスト

メモ
Win32 API から移行する開発者のために、「Win32 の移行」の表に Win32 DrawText フラグと Windows Presentation Foundation (WPF) におけるほぼ同等のものを示します。

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

WPF には、画面にテキストを描画するための複数のコントロールが含まれています。 各コントロールは、異なるシナリオを対象にしており、それぞれに一連の機能と制限があります。 一般的に、user interface (UI) で短い文を使用するなど、限定的なテキストのサポートが必要な場合は、TextBlock 要素を使用する必要があります。 最小限のテキスト サポートが必要な場合には、Label を使用できます。 詳細については、「WPF のドキュメント」を参照してください。

FormattedText オブジェクトは、Windows Presentation Foundation (WPF) テキスト コントロールよりも強力なテキスト書式設定機能を提供し、テキストを装飾的要素として使用する場合に役立ちます。詳細については、後の「書式設定されたテキストのジオメトリへの変換」を参照してください。

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

FormattedText オブジェクトの使用

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

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

折り返しと省略記号を示す表示テキスト

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

FormattedText オブジェクトを作成し、複数の書式設定スタイルをテキストに適用するコード例を次に示します。

        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

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));
}

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

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

            ' 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 オブジェクトに 1 つのアニメーションを適用することができ、これによりアニメーションは書式設定されたテキストのアウトラインに従うようになります。

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

テキストのパス図形座標に従う球体

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

書式設定したテキストを PathGeometry オブジェクトに変換したら、他の有意義な効果を作成することができます。 たとえば、ビデオをクリップしてテキスト内に表示することができます。

テキストのパス図形座標に表示されるビデオ

Win32 の移行

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

参照

処理手順

方法 : 中抜きの文字列を作成する

参照

FormattedText

概念

WPF のドキュメント

WPF のタイポグラフィ

方法 : テキストの PathGeometry アニメーションを作成する