Using Text as a Decorative Element: the Outline Text Custom Control
The FormattedText object provides greater text formatting features than standard WPF text controls, and can be useful in cases where you want to use text as a decorative element. This posting shows how to use the FormattedText object to create striking visual effects by setting a Brush value to the fill and outline of the text.
At the bottom of this posting, you can find an attached Zip file (OutlineTextControlViewer.zip) that contains the Visual Studio project files for building a standalone Outline Text custom control assembly and an application that uses the custom control.
Text as a Decorative Element
In most cases, when you are adding ornamentation to text strings in your 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.
However, you can also convert text into Geometry objects, allowing you to create other types of visually rich text. 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:
Outline Text Custom Control
The Outline Text Custom Control that is attached to this posting is a light-weight custom control that allows you to display text as a Geometry object. Both the fill area and the outline can be drawn with a specified Brush value.
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.
// 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,
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)
{
_textHighLightGeometry =
formattedText.BuildHighlightGeometry(new Point(0, 0));
}
Outline Text Viewer Application
Once the text has been converted into a Geometry object, you can set the Fill and Stroke properties to Brush values. The Outline Text viewer application sets the Outline Text custom control's Fill and Stroke properties to the selected ImageBrush and SolidColorBrush values:
outlineText.Fill =
(
ImageBrush)this.FindResource("FlamesBrush");
outlineText.Stroke = Brushes.Black;
Try modifying the Outline Text custom control properties using the Outline Text Viewer application. Using this application, you can see the immediate effect of setting properties, such as the width of the stroke.
In my next posting, I'll go through the process of creating a light-weight, render-only custom control, that can be instantiated in both XAML and procedural code.
Enjoy,
Lorin
About Us
We are the Windows Presentation Foundation SDK writers and editors.
Comments
Anonymous
January 02, 2007
Lorin on our SDK team just posted a great sample on how to use FormattedText to create fun decorativeAnonymous
January 02, 2007
Lorin on our SDK team just posted a great sample on how to use FormattedText to create fun decorative