Silverlight Brass Tacks

Bill Reiss' Silverlight Ramblings
My upcoming Silverlight book for beginners Hello! Silverlight 2 with Dave Campbell, available online now!



Pages

Recent posts

Navigation

Archive

Blogroll

Tampa Divorce Lawyer

North of Tampa in Lutz, Florida. A Tampa Divorce Lawyer focusing on family, divorce, and real estate law.

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

PathTextBlock Control

Source code and sample project available on CodePlex: http://www.codeplex.com/sltext

The PathTextBlock control converts text to a Path which allows you to do a couple of things you can't normally do with text in Silverlight. First of all, instead of a Foreground brush, you have a Stroke and a Fill, which allows you to draw text with an outline. Secondly, the PathTextBlock supports Transform objects which can allow you to distort the text, draw it along a curve, or other transforms. You can easily create your own transforms as well.

This is the included sample, it uses a sine wave transform to make the text wavy and then uses a polar transform to wrap it around a circle:

The corresponding XAML for the above sample is as follows:

<brg:PathTextBlock x:Name="tb" Font="JellyBelly70.xfn" Stroke="Red" Fill="White"
    StrokeThickness
="2" FontSize="100" UpdateInterval
="0:0:0.02">
    <brg:PathTextBlock.TextTransform
>
            <brg:TransformGroup
>
                <brg:SineTransform StartAngle="0" Amplitude="30" Period
="250"/>
                <brg:PolarTransform Angle="180" CenterX="320" CenterY="240"

                    RadiusX
="250" RadiusY="200" RadiusStretch="1.2"

                    AngleStretch
=".4" TextDirection
="Clockwise"/>
            </brg:TransformGroup
>
        </brg:PathTextBlock.TextTransform
>
</
brg:PathTextBlock>

Some other transforms I'd like to see are a 3D perspective transform and a transform that aceepts a PathGeometry. If you write one of these or another interesting transform, please let me know and I'll either include it or link to it based on what you want.

To create your own transforms, inherit from BlueRoseGames.Controls.Text.Transform, and then override the TransformPoint method. Also if you have any custom properties, call SetChanged() in the property set code. This will tell the PAthTextBlock that the transform has changed and it will re-render.

This code is released under the Microsoft Permissive License (Ms-PL) and can be used at no charge for non-commercial and commercial use. The software is provided as-is.

More documentation coming soon, check out the sample project and the included PolarTransform and SineTransform classes.

To get started, convert the font you want to use to a "xfn" file using the included FontParser.exe. Then add this xfn file to your Silverlight project and make sure it's of type "Content". Put this font file name in the Font property of the PathTextBlock.

Planned updates to the project:

  • Expose all properties as dependency properties so that they can be databound.
  • Exception handling
  • More transforms
  • More samples

If you use this for something interesting, please let me know and I'll create a gallery.

Note that any fonts you embed in your application are subject to the original licensing of the font and you should contact the font publisher before embedding a font in your application.