FlowDocument 中的波浪下划线

Question

在 WPF 中，是否有一种简单的方法可以向 FlowDocument 元素添加波浪下划线（如 Word 中的拼写错误）？ 有 Underline 类，但似乎没有办法设置它的样式。

Answer 1

您可以使用对 Robert Macne 的解决方案进行以下更改来创建波浪效果

将视觉画笔添加到 Grid.Resources 部分：

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

并将笔更改为：

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

Answer 2

红色下划线很简单：

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

波浪形红色下划线会涉及更多一些，但我认为您可以创建一个带有波浪形红色东西的 VisualBrush，并将其设置为笔的画笔您为下划线 TextDecoration 指定的。 编辑：请参阅 bstoney 的帖子。

Answer 3

这是@bstoney 在代码中实现的解决方案。

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

另一种方法可以是：创建一个带有两条线（类似倒V）的绘图组，并将该绘图组作为绘图画笔的内容传递，并使用平铺作为模式，以便它可以重复。 但当我们画两条线时，这里的峰值将被指出，一条线从另一条线的末端开始。

示例如下：

        // 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);

Answer 5

我知道这是一个老问题，但我更喜欢这把刷子。 它有点棱角，但非常干净。

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