Wpf – Wavy underlines in a FlowDocument

flowdocumentunderlinewpf

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.

Best Answer

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

Related Solutions

.net – What’s the difference between StaticResource and DynamicResource in WPF

A StaticResource will be resolved and assigned to the property during the loading of the XAML which occurs before the application is actually run. It will only be assigned once and any changes to resource dictionary ignored.

A DynamicResource assigns an Expression object to the property during loading but does not actually lookup the resource until runtime when the Expression object is asked for the value. This defers looking up the resource until it is needed at runtime. A good example would be a forward reference to a resource defined later on in the XAML. Another example is a resource that will not even exist until runtime. It will update the target if the source resource dictionary is changed.

R – Wavy underlines as a TextDecoration: what I am doing wrong

bstoney had a solution to this problem here. The key seems to be setting the Viewbox as well as the Viewport such that the waves are seperated vertically, so you only get 1 in the underline.

There are some breaks in the wave that can be eliminated by extending it to the right and changing the Viewbox from so it starts from 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>

Best Answer

Related Solutions

.net – What’s the difference between StaticResource and DynamicResource in WPF

R – Wavy underlines as a TextDecoration: what I am doing wrong

Related Topic