Wavy underscores like TextDecoration: what am I doing wrong?

Question

I want to create wavy underlines using TextDecoration (in a control like RichTextBox).

I have done the following:

private static Pen CreateErrorPen() { var geometry = new StreamGeometry(); using (var context = geometry.Open()) { context.BeginFigure(new Point(0.0, 0.0), false, false); context.PolyLineTo(new[] { new Point(0.75, 0.75), new Point(1.5, 0.0), new Point(2.25, 0.75), new Point(3.0, 0.0) }, true, true); } var brushPattern = new GeometryDrawing { Pen = new Pen(Brushes.Red, 0.2), Geometry = geometry }; var brush = new DrawingBrush(brushPattern) { TileMode = TileMode.Tile, Viewport = new Rect(0.0, 1.5, 9.0, 3.0), ViewportUnits = BrushMappingMode.Absolute }; var pen = new Pen(brush, 3.0); pen.Freeze(); return pen; } 

This almost works, but depending on the emphasized position, words in the underline text often appear as a pattern of several superimposed waves. Also, the underscores are a bit blurry, even if they are correct (wpf problem with the pattern between the pixels, I suppose).

My solution was a kind of trial error, so I might have made a mistake, especially with Viewport / ViewportUnits.

What am I doing wrong, and is there a way to get clear underscores?

Thanks in advance.

Answer 1

bstoney was the solution to this problem here . It seems that the key sets Viewbox as well as Viewport , so that the waves are separated vertically, so you only get 1 in underline.

There are some gaps in the wave that can be Viewbox stretching them to the right and changing the Viewbox , so it starts with X = 1 instead of 0:

 <VisualBrush x:Key="WavyBrush" TileMode="Tile" Viewbox="1,0,3,3" ViewboxUnits="Absolute" Viewport="0,-1,6,4" ViewportUnits="Absolute"> <VisualBrush.Visual> <Path Data="M 0,1 C 1,0 2,2 3,1 4,0 5,2 6,1" Stroke="Red" StrokeThickness="0.2"/> </VisualBrush.Visual> </VisualBrush>