Click here to Skip to main content
15,875,646 members
Articles / Programming Languages / C#
Article

Text on A Path for Silverlight

Rate me:
Please Sign up or sign in to vote.
4.86/5 (8 votes)
27 Oct 2008CPOL3 min read 73.5K   1.3K   36   24
Displays a text string along a path defined by a given geometry.

Introduction

Currently, with Silverlight, there is no built-in capability to display a text string that will follow the path of a given geometry (see picture below). Similarly, Windows Presentation Foundation does not have such a capability either, but WPF does provides a number of helper methods (e.g., path flattening) that provide a good start. I wrote an article a while ago that provides text on a path for WPF. The article here takes the text on a path class written for WPF and makes it available for Silverlight.

Ellipse.JPG

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 WPF method GetFlattenedPathGeometry() 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):

flattenedpath.PNG

Currently, Silverlight 2 has no such path flattening method! Charles Petzold developed a path flatting method in his article and gave permission to reuse the code. The code is included here in the ‘PathGeometryHelper’ project. Charles’ method was written for WPF, and so it needed to be ported to Silverlight. In porting this code to Silverlight, more missing functionality was found. Namely, Silverlight lacks some methods in the Matrix class. Also, Silverlight has no Vector class. Equivalent functionality for these classes (and a few others) has been provided in the ‘MatrixMathHelpers’ project.

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.

flattenedpathWithText.PNG

Using the code

In the attached solution, there are two projects for the TextOnAPath control, one for Silverlight (TextOnAPathSilverlight) and another for WPF (TextOnAPathWPF). The source code in the Silverlight version is linked over to the WPF version. In this way, both versions of the control share a common code base. The compiler directive ‘#if SILVERLIGHT’ is used to denote code differences. Notice that the XAML is not linked between the two controls because currently there is no equivalent for the ‘#if’ compiler directive in XAML.

The Silverlight version of the TextOnAPath, like the WPF version, is used just like any normal UIElement. The XAML below will display the text string along the curved path centered in a grid. Notice how the path is defined using the mini-language by the ‘MyPath’ string variable (for more info on path mini-language, see this article). Currently, Silverlight has no built-in functionality to convert this mini-language string into a PathGeometry, but thankfully, a converter has been provided in this article. The code is included here in the ‘PathConverter’ project. Using a binding converter, the TextPath attribute is able to get the desired PathGeometry value from the String value.

XML
<UserControl x:Class="TextOnAPathTestAppSilverlight.PageTest"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:core="clr-namespace:System;assembly=mscorlib"
   xmlns:PathConverter="clr-namespace:PathConverter;
       assembly=PathConverter"
   xmlns:TextOnAPath="clr-namespace:TextOnAPath;
       assembly=TextOnAPathSilverlight"
   Width="500" Height="500">

 <Grid>
   <Grid.Resources>

     <core:String x:Key="MyPath">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</core:String>

     <PathConverter:StringToPathGeometryConverter 
         x:Key="MyPathConverter"/>

   </Grid.Resources>

   <TextOnAPath:TextOnAPath TextPath="{Binding 
     Source={StaticResource MyPath}, 
     Converter={StaticResource MyPathConverter}}" 
     FontSize="25" DrawLinePath="True" 
     Text="The quick brown fox jumped over the lazy dog."/>
 
 </Grid>

</UserControl>

ExampleWindow2.JPG

Parameters of the TextOnAPath control:

  • Text (string): the string to be displayed. If the Text string is longer than the geometry path, then text will be truncated.
  • TextPath (Geometry): the geometry for the text to follow.
  • DrawPath (Boolean) (only in WPF version): if true, draws the geometry below the text string.
  • DrawLinePath (Boolean): if true, draws the flattened path geometry below the text string.
  • ScaleTextPath (Boolean): if true, the geometry will be scaled to fit the size of the control.

Points of interest

  • Additional optimization of the code is needed to improve performance.
  • Other similar work.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I work in the Bay Area primarily developing software on the Windows platform using C++, .NET/C#, WPF, and Silverlight.

Comments and Discussions

 
Questionline length is at most length of text? Pin
renat_8512-Oct-12 4:04
renat_8512-Oct-12 4:04 
AnswerRe: line length is at most length of text? Pin
lneir14-Oct-12 7:32
lneir14-Oct-12 7:32 
QuestionSilverlight Version of TextOnAPath is different from WPF version Pin
SyedWaqas20-Sep-11 6:28
SyedWaqas20-Sep-11 6:28 
AnswerRe: Silverlight Version of TextOnAPath is different from WPF version Pin
lneir25-Sep-11 16:20
lneir25-Sep-11 16:20 
Questioni see no text Pin
Gizzly.SGD28-Oct-10 4:25
Gizzly.SGD28-Oct-10 4:25 
GeneralThanks!! Pin
Kevinrow21-Sep-10 22:18
Kevinrow21-Sep-10 22:18 
GeneralGood ... Pin
vikas amin3-Dec-09 6:03
vikas amin3-Dec-09 6:03 
GeneralDo this in code [modified] Pin
Sternze21-Jul-09 22:04
Sternze21-Jul-09 22:04 
GeneralRe: Do this in code Pin
lneir22-Jul-09 17:53
lneir22-Jul-09 17:53 
GeneralRe: Do this in code Pin
Sternze22-Jul-09 19:58
Sternze22-Jul-09 19:58 
QuestionFlattenArc returns no points Pin
zaheee8-Jul-09 5:22
zaheee8-Jul-09 5:22 
AnswerRe: FlattenArc returns no points Pin
lneir8-Jul-09 17:52
lneir8-Jul-09 17:52 
GeneralRe: FlattenArc returns no points Pin
zaheee12-Jul-09 12:28
zaheee12-Jul-09 12:28 
GeneralRe: FlattenArc returns no points Pin
gantww30-Sep-09 16:42
gantww30-Sep-09 16:42 
GeneralRe: FlattenArc returns no points Pin
gantww30-Sep-09 16:44
gantww30-Sep-09 16:44 
Generaltype conversion exceptions Pin
Mike Hodnick25-Feb-09 7:17
Mike Hodnick25-Feb-09 7:17 
GeneralRe: type conversion exceptions Pin
lneir28-Feb-09 10:40
lneir28-Feb-09 10:40 
GeneralRe: type conversion exceptions Pin
renat_8512-Oct-12 3:55
renat_8512-Oct-12 3:55 
QuestionTextOnAPath and Path not overlapping Pin
therabyte7-Jan-09 8:51
therabyte7-Jan-09 8:51 
AnswerRe: TextOnAPath and Path not overlapping Pin
lneir8-Jan-09 19:36
lneir8-Jan-09 19:36 
GeneralRe: TextOnAPath and Path not overlapping Pin
lneir8-Jan-09 19:51
lneir8-Jan-09 19:51 
GeneralLiked it!!!! Pin
StuBaum8-Nov-08 9:42
StuBaum8-Nov-08 9:42 
GeneralRe: Liked it!!!! Pin
lneir9-Nov-08 10:50
lneir9-Nov-08 10:50 
GeneralThanks Pin
Siavash Mortazavi3-Nov-08 22:01
Siavash Mortazavi3-Nov-08 22:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.