Project Description
WinRT PathTextBlock is a control that overcomes some of the limitations in the built in WinRT TextBlock, such as not being able to outline the text, and not being able to distort the text, for example to draw it along a circle.

Previously, you could use a tool like Expression Design to create the text and export it as a Path, but this wouldn't work for text that needed to be specified at run time. This control allows you to specify the Text property and it will generate the proper Path objects based on the font, font size, and text.


Project Description
WinRT PathTextBlock is a control that overcomes some of the limitations in the built in WinRT TextBlock, such as not being able to outline the text, and not being able to distort the text, for example to draw it along a circle.

Previously, you could use a tool like Expression Design to create the text and export it as a Path, but this wouldn't work for text that needed to be specified at run time. This control allows you to specify the Text property and it will generate the proper Path objects based on the font, font size, and text.

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.

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="1" FontSize="100" UpdateIntervalSeconds=".02">
            <brg:PathTextBlock.TextTransform>
                <brg:TransformGroup>
                    <brg:TransformGroup.Children>
                        <brg:SineTransform StartAngle="0" Amplitude="30" Period="250"/>
                        <brg:PolarTransform Angle="180" CenterX="700" CenterY="400" RadiusX="500" RadiusY="400" RadiusStretch="1.6" AngleStretch=".4" TextDirection="Clockwise"/>
                    </brg:TransformGroup.Children>
                </brg:TransformGroup>
            </brg:PathTextBlock.TextTransform> 
        </brg:PathTextBlock>


You can also write your own transforms, if you write an interesting transform, please let me know and I'll either include it or link to it, whatever you prefer.

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 WinRT 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:
  • Remove need for xfn files by retrieving font information at run time (if possible).
  • Exception handling
  • More transforms
  • More samples

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

You can follow my efforts on this project and others on my blog at:
http://www.billreiss.com/

Last edited Apr 6, 2012 at 8:12 PM by billreiss, version 2