WPF control that displays text along a given path
- define the path in several different ways like PathGeometry, Geometry, PathFigure, Line, Rectangle, Ellipse
- show text warped or unwarped
- stretch the text along the full path (=> automatic font size) or use the given FontSize (text might be shorter or longer than the path)
- set fill and stroke independently
- supports gradients of any kind that is applied to the result as a single entity (not each character individually)
Define paths in your resources...
<Grid.Resources>
<PathGeometry x:Key="path1"
Figures="M 50,50 C 100,0 200,100 250,50" />
<Geometry x:Key="path2">M 50,50 C 100,0 200,100 250,50</Geometry>
<LineGeometry x:Key="path3"
StartPoint="100,100"
EndPoint="400,200" />
<RectangleGeometry x:Key="path4"
Rect="100,100,130,130" />
<EllipseGeometry x:Key="path5"
Center="120,130"
RadiusX="100"
RadiusY="30" />
<PathFigure x:Key="path6"
IsClosed="False"
StartPoint="100,100">
<BezierSegment Point1="200,150"
Point2="350,0"
Point3="400,150" />
</PathFigure>
<PathGeometry x:Key="path7"
Figures="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
<Geometry.Transform>
<ScaleTransform ScaleX="3" ScaleY="3" />
</Geometry.Transform>
</PathGeometry>
</Grid.Resources>...and use them
<textonpath:TextOnPath Margin="22,29,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
FontWeight="Black"
Path="{StaticResource path7}"
Stretch="True"
StrokeThickness="3"
Text="Quick brown fox jumps over the lazy dog."
Warp="True">
<textonpath:TextOnPath.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0.085" Color="#FF02B9A0" />
<GradientStop Offset="0.892" Color="#FFD4C100" />
<GradientStop Offset="0.499" Color="#FFB65959" />
</LinearGradientBrush>
</textonpath:TextOnPath.Stroke>
</textonpath:TextOnPath>or directy assign the path (again any type of Geometry or PathFigure will work) to the Path property of the TextOnPath control
<textonpath:TextOnPath Margin="445,250,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="40"
FontWeight="Bold"
Stretch="True"
Stroke="#FF830483"
StrokeThickness="0"
Text="Hello colorful path"
Warp="True">
<textonpath:TextOnPath.Path>
<PathFigure IsClosed="False"
StartPoint="0,0">
<BezierSegment Point1="20,30"
Point2="70,30"
Point3="100,30" />
<BezierSegment Point1="120,30"
Point2="190,30"
Point3="200,0" />
</PathFigure>
</textonpath:TextOnPath.Path>
<textonpath:TextOnPath.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="1" Color="#FF7D9BFF" />
<GradientStop Offset="0" Color="#FFF17D7D" />
<GradientStop Offset="0.519" Color="#FFBEC08C" />
</LinearGradientBrush>
</textonpath:TextOnPath.Fill>
</textonpath:TextOnPath>- because of its simplicity the TextOnPath control is part of the test application
- this control is based on Charles Petzold's work, ideas and code