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

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"&gt;
    <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 2

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" />