Wavy underlines in a FlowDocument

Question

In WPF, is there an easy way to add wavy underlines (like spelling errors in Word) to FlowDocument elements? There's the Underline class, but there seems to be no way to style it.

Answer 1

You can create the wavy effect using the following changes to Robert Macne's solution

Add a visual brush to the Grid.Resources section:

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

And change the pen to:

<Pen Brush="{StaticResource WavyBrush}" Thickness="6" />

Answer 2

A red underline is simple enough:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <FlowDocument x:Key="doc">
            <Paragraph>
                <Run Text="This text is underlined in red.">
                    <Run.TextDecorations>
                        <TextDecoration Location="Underline">
                            <TextDecoration.Pen>
                                <Pen Brush="Red" Thickness="1" DashStyle="{x:Static DashStyles.Dot}"/>
                            </TextDecoration.Pen>
                        </TextDecoration>
                    </Run.TextDecorations>
                </Run>
            </Paragraph>
        </FlowDocument>
    </Grid.Resources>
    <FlowDocumentReader Document="{StaticResource doc}"/>
</Grid>

A wavy red underline would be a bit more involved, but I think you could create a VisualBrush with a wavy red thing in it, and set that as the Brush of the Pen that you specify for the underlining TextDecoration. Edit: see bstoney's post for this.

Answer 3

Here is @bstoney's solution implemented in code.

Pen path_pen = new Pen(new SolidColorBrush(Colors.Red), 0.2);
path_pen.EndLineCap = PenLineCap.Square;
path_pen.StartLineCap = PenLineCap.Square;

Point path_start = new Point(0, 1);
BezierSegment path_segment = new BezierSegment(new Point(1, 0), new Point(2, 2), new Point(3, 1), true);
PathFigure path_figure = new PathFigure(path_start, new PathSegment[] { path_segment }, false);
PathGeometry path_geometry = new PathGeometry(new PathFigure[] { path_figure });

DrawingBrush squiggly_brush = new DrawingBrush();
squiggly_brush.Viewport = new Rect(0, 0, 6, 4);
squiggly_brush.ViewportUnits = BrushMappingMode.Absolute;
squiggly_brush.TileMode = TileMode.Tile;
squiggly_brush.Drawing = new GeometryDrawing(null, path_pen, path_geometry);

TextDecoration squiggly = new TextDecoration();
squiggly.Pen = new Pen(squiggly_brush, 6);
text_box.TextDecorations.Add(squiggly);

Answer 4

I know this is an old question but I prefer this brush. It's a little angular but very clean.

    <VisualBrush x:Key="WavyBrush">
        <VisualBrush.Visual>
            <Path Data="M 0,2 L 2,0 4,2 6,0 8,2 10,0 12,2" Stroke="Red"/>
        </VisualBrush.Visual>
    </VisualBrush>