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>

Answer 5

Another way can be : Creating a drawing group with two lines(kind of inverted V) and passing that drawing group as content for drawing brush and having Tile as mode so that it can repeat. But here peaks will be pointed as we are drawing two lines, one starts from others end.

Sample will look like :

        // Configuring brush.
        DrawingGroup dg = new DrawingGroup();
        using (DrawingContext dc = dg.Open())
        {
            Pen pen = new Pen(Brushes.Red, 1);
            dc.DrawLine(pen, new System.Windows.Point(0.0, 0.0), new System.Windows.Point(3.0, 3.0));
            dc.DrawLine(pen, new System.Windows.Point(3.0, 3.0), new System.Windows.Point(5.0, 0.0));
        }
        public DrawingBrush brush = new DrawingBrush(dg);
        brush.TileMode = TileMode.Tile;
        brush.Viewport = new Rect(0, 0, 4, 4);
        brush.ViewportUnits = BrushMappingMode.Absolute;
        
        // Drawing line on VisualCollection
        private VisualCollection visualCollection = new VisualCollection(this);
        DrawingVisual dv = new DrawingVisual();
        using (DrawingContext drawingContext = dv.RenderOpen())
        {
            drawingContext.DrawLine(new Pen(brush, 2), new Point(50, 100), new Point(200, 100));
            base.OnRender(drawingContext);
        }
        this.visualCollection.Add(dv);