How to: Create Outlined Text
In most cases, when you are adding ornamentation to text strings in your Windows Presentation Foundation (WPF) application, you are using text in terms of a collection of discrete characters, or glyphs. For example, you could create a linear gradient brush and apply it to the Foreground property of a TextBox object. When you display or edit the text box, the linear gradient brush is automatically applied to the current set of characters in the text string.
Example of a linear gradient brush applied to a text box
.jpg "Text displayed with a linear gradient brush")
However, you can also convert text into Geometry objects, allowing you to create other types of visually rich text. For example, you could create a Geometry object based on the outline of a text string.
Example of a linear gradient brush applied to the outline geometry of text
.jpg "Text outline using a linear gradient brush")
When text is converted to a Geometry object, it is no longer a collection of characters—you cannot modify the characters in the text string. However, you can affect the appearance of the converted text by modifying its stroke and fill properties. The stroke refers to the outline of the converted text; the fill refers to the area inside the outline of the converted text.
The following examples illustrate several ways of creating visual effects by modifying the stroke and fill of converted text.
Example of setting stroke and fill to different colors
.jpg "Text with different colors for fill and stroke")
Example of an image brush applied to the stroke
.jpg "Text with image brush applied to stroke")
It is also possible to modify the bounding box rectangle, or highlight, of the converted text. The following example illustrates a way to creating visual effects by modifying the stroke and highlight of converted text.
Example of an image brush applied to the stroke and highlight
.jpg "Text with image brush applied to stroke")
Example
The key to converting text to a Geometry object is to use the FormattedText object. Once you have created this object, you can use the BuildGeometry and BuildHighlightGeometry methods to convert the text to Geometry objects. The first method returns the geometry of the formatted text; the second method returns the geometry of the formatted text's bounding box. The following code example shows how to create a FormattedText object and to retrieve the geometries of the formatted text and its bounding box.
''' <summary>
''' Create the outline geometry based on the formatted text.
''' </summary>
Public Sub CreateText()
Dim fontStyle As FontStyle = FontStyles.Normal
Dim fontWeight As FontWeight = FontWeights.Medium
If Bold = True Then
fontWeight = FontWeights.Bold
End If
If Italic = True Then
fontStyle = FontStyles.Italic
End If
' Create the formatted text based on the properties set.
Dim formattedText As New FormattedText(Text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, New Typeface(Font, fontStyle, fontWeight, FontStretches.Normal), FontSize, Brushes.Black) ' This brush does not matter since we use the geometry of the text.
' Build the geometry object that represents the text.
_textGeometry = formattedText.BuildGeometry(New Point(0, 0))
' Build the geometry object that represents the text hightlight.
If Highlight = True Then
_textHighLightGeometry = formattedText.BuildHighlightGeometry(New Point(0, 0))
End If
End Sub
/// <summary>
/// Create the outline geometry based on the formatted text.
/// </summary>
public void CreateText()
{
System.Windows.FontStyle fontStyle = FontStyles.Normal;
FontWeight fontWeight = FontWeights.Medium;
if (Bold == true) fontWeight = FontWeights.Bold;
if (Italic == true) fontStyle = FontStyles.Italic;
// Create the formatted text based on the properties set.
FormattedText formattedText = new FormattedText(
Text,
CultureInfo.GetCultureInfo("en-us"),
FlowDirection.LeftToRight,
new Typeface(
Font,
fontStyle,
fontWeight,
FontStretches.Normal),
FontSize,
System.Windows.Media.Brushes.Black // This brush does not matter since we use the geometry of the text.
);
// Build the geometry object that represents the text.
_textGeometry = formattedText.BuildGeometry(new System.Windows.Point(0, 0));
// Build the geometry object that represents the text hightlight.
if (Highlight == true)
{
_textHighLightGeometry = formattedText.BuildHighlightGeometry(new System.Windows.Point(0, 0));
}
}
In order to display the retrieved the Geometry objects, you need to access the DrawingContext of the object that is displaying the converted text. In these code examples, this is done by creating a custom control object that is derived from a class that supports user-defined rendering.
To display Geometry objects in the custom control, provide an override for the OnRender method. Your overridden method should use the DrawGeometry method to draw the Geometry objects.
''' <summary>
''' OnRender override draws the geometry of the text and optional highlight.
''' </summary>
''' <param name="drawingContext">Drawing context of the OutlineText control.</param>
Protected Overrides Sub OnRender(ByVal drawingContext As DrawingContext)
' Draw the outline based on the properties that are set.
drawingContext.DrawGeometry(Fill, New Pen(Stroke, StrokeThickness), _textGeometry)
' Draw the text highlight based on the properties that are set.
If Highlight = True Then
drawingContext.DrawGeometry(Nothing, New Pen(Stroke, StrokeThickness), _textHighLightGeometry)
End If
End Sub
/// <summary>
/// OnRender override draws the geometry of the text and optional highlight.
/// </summary>
/// <param name="drawingContext">Drawing context of the OutlineText control.</param>
protected override void OnRender(DrawingContext drawingContext)
{
// Draw the outline based on the properties that are set.
drawingContext.DrawGeometry(Fill, new System.Windows.Media.Pen(Stroke, StrokeThickness), _textGeometry);
// Draw the text highlight based on the properties that are set.
if (Highlight == true)
{
drawingContext.DrawGeometry(null, new System.Windows.Media.Pen(Stroke, StrokeThickness), _textHighLightGeometry);
}
}