Render outlined text in a WPF program using C#

[Render outlined text]

The example Render text in a WPF program using C# shows how to draw basic text. This example uses the following overridden OnRender to draw outlined text.

protected override void OnRender(DrawingContext drawingContext)
{
    // Clear the background.
    Rect bg_rect = new Rect(0, 0, ActualWidth, ActualHeight);
    drawingContext.DrawRectangle(Brushes.White, null, bg_rect);

    // Create the FormattedText.
    const double fontsize = 70;
    FontFamily font_family = new FontFamily("Segoe");
    Typeface typeface = new Typeface("Segoe");
    FormattedText formatted_text =
        new FormattedText("Outlined\nText",
            new CultureInfo("en-us"), FlowDirection.LeftToRight,
            typeface, fontsize, Brushes.Black);
    formatted_text.SetFontWeight(FontWeights.Bold);

    // Center horizontally.
    formatted_text.TextAlignment = TextAlignment.Center;

    // Pick an origin to center the text.
    Point origin = new Point(
        grdMain.ActualWidth / 2,
        (grdMain.ActualHeight - formatted_text.Height) / 2);

    // Convert the text into geometry.
    Geometry geometry = formatted_text.BuildGeometry(origin);

    // Draw the geometry.
    Pen pen = new Pen(Brushes.Red, 2);
    drawingContext.DrawGeometry(Brushes.Yellow, pen, geometry);
}

The method starts by clearing the drawing area. It then creates a Typeface representing the Segoe (pronounced “see-go”) font and uses it to make a FormattedText object. It uses that object’s SetFontWeight method to make the text bold. Outlined text works best when the characters have relatively large internal spaces, so bold Gothic fonts such as Segoe work well.

The code sets the text’s alignment and calculates the position where the text should be drawn. It then calls the FormattedText object’s BuildGeometry method to convert the text into a sequence of drawing commands. It finishes by calling the DrawingContext object’s DrawGeometry method to draw the geometry, filling it with a yellow brush and outlining it with a red pen.


Download Example   Follow me on Twitter   RSS feed   Donate




This entry was posted in drawing, geometry, graphics, wpf, XAML and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

4 Responses to Render outlined text in a WPF program using C#

  1. Render text filled with an image in a WPF program using C#

    The example Render outlined text in a WPF program using C# shows how to draw text that is filled with one color and outlined with another. This example uses the following overridden OnRender to draw text that is filled with an image. The code in blue shows where this example differs from the previous example. protected override void OnRender(DrawingContext drawingContext) { // Clear the background. Rect bg_rect = new Rect(0, 0, this.ActualWidth, this.ActualHeight); drawingContext.DrawRectangle(Brushes.White, null, bg_rect); // Create …

  2. Pingback: Render text filled with an image in a WPF program using C# - C# HelperC# Helper

  3. Frank says:

    Please explain how you call this routine from a wpf C# or vb.net application. The example works fine. But I don’t know how to call it.

    Thanks

    • RodStephens says:

      WPF isn’t really designed to allow you to render. Instead you normally create objects such as Labels and TextBoxes, and then they do all the drawing automatically.

      This example overrides the form’s OnRender method, which normally draws the objects on the form. That’s where the code shown in the example is.

      To draw on another control, you could make a subclass of that control and override its OnRender method.

      Or you could render onto a bitmap and then display the bitmap on another control. See this example:

      Render text onto a RenderTargetBitmap with WPF and C#

      You may also want to go to my Index page and search for “render.” You’ll find several related examples that may help make this clearer.

Leave a Reply

Your email address will not be published. Required fields are marked *