Text On A Path in WPF
A control that will display a text string on a specified geometry
Introduction
Currently, with Window Presentation Foundation (WPF), it is not easy to display a text string that will follow the path of any given geometry. WPF’s TextEffects
provides transformation on individual characters, but trying to use this capability to get the text to follow an arbitrary geometry requires some additional work. Also, TextEffects
is not available in Silverlight. With the control provided here, a given text string can be made to display on any 2D WPF geometry. The control can, for example, display text on an EllipseGeometry
:
A sample application and source code has been provided.
Background
To display text on a path, the fundamental problem that must be solved is to figure out how to translate and rotate each character of the string to fit the specified geometry. A big help in solving the problem is the GetFlattenedPathGeometry()
method provided by the Geometry
base class. This method returns a PathGeometry
that approximates the geometry by a series of lines (PolyLineSegment
and LineSegment
). For example, the red lines below depict the flattened path of the path geometry (black):
For a good overview of the WPF geometry classes, see MSDN.
The next step in the problem is to take the flattened path geometry and figure out how to transform the characters of the string
to follow the flattened path. The figure below depicts the angle that must be calculated so the letter “A
” will follow the flattened path. In TextOnAPath
, the method ‘GetIntersectionPoints
’ in the GeometryHelper
class calculates the points along the flattened path where the characters intersect with the path. Knowing the intersection points, the angle (and translation) values can then be calculated.
Using the Code
The TextOnAPath
control is used just like any normal UIElement
in WPF. The XAML below will display the text string
along the curved path, centered in a grid:
<Window x:Class="TextOnAPathTestApp.Window1"
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:TextOnAPath="clr-namespace:TextOnAPath;assembly=TextOnAPath"
Title="Test App" Height="500" Width="500">
<Grid>
<TextOnAPath:TextOnAPath FontSize="30" DrawPath="True"
Text="The quick brown fox jumped over the lazy hen.">
<TextOnAPath:TextOnAPath.TextPath>
<PathGeometry Figures="M0,0 C120,361 230.5,276.5 230.5,276.5
L308.5,237.50001 C308.5,237.50001 419.5,179.5002 367.5,265.49993
315.5,351.49966 238.50028,399.49924 238.50028,399.49924 L61.500017,
420.49911"/>
</TextOnAPath:TextOnAPath.TextPath>
</TextOnAPath:TextOnAPath>
</Grid>
</Window>
Parameters for the TextOnAPath
control:
Text
(string
): Thestring
to be displayed. If thetext string
is longer than thegeometry
path, thentext
will be truncated.TextPath
(Geometry
): Thegeometry
for thetext
to follow.DrawPath
(Boolean): Iftrue
, draws thegeometry
below thetext string
.DrawLinePath
(Boolean): Iftrue
, draws the flattened pathgeometry
below thetext string
.ScaleTextPath
(Boolean): Iftrue
, thegeometry
will be scaled to fit the size of the control.
Points of Interest
- Additional optimization of the code is needed to improve performance
- A Silverlight version of this control is also available here
- Other similar work
History
- 13th October, 2008
- Initial post
- 29th October, 2008
- Update to fix code that draws
geometry
- Provided link to Silverlight version of code
- Update to fix code that draws