如何实现多行文本的运行突出显示（选择）？

你走对了路，拆分成单独Path的 's 是个好主意。

让我们执行到底。

对于初学者来说，回放功能已经相当复杂，所以我们将把它移到一个单独的UserControl. 然后，让每个控件负责一行。Clip为了不按几何搜索碎片，我们简单地用'a.切断这条线。在输入端，UserControl我们将提交几何文本的解析结果（通过函数Create）。

<UserControl x:Class="KaraokeText.SingleLine"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Path Name="Target" Stroke="Black" StrokeThickness="0.5">
        <Path.Fill>
            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                <GradientStop Color="Black" Offset="0" x:Name="TargetFrom"/>
                <GradientStop Color="White" Offset="0" x:Name="TargetTo" />
            </LinearGradientBrush>
        </Path.Fill>
        <Path.Resources>
            <Storyboard x:Key="AnimationStoryboard">
                <DoubleAnimation Duration="00:00:00.25"
                                 Storyboard.TargetName="TargetFrom"
                                 Storyboard.TargetProperty="Offset">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseIn"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimation Duration="00:00:00.25"
                                 Storyboard.TargetName="TargetTo"
                                 Storyboard.TargetProperty="Offset">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Path.Resources>
    </Path>
</UserControl>

代码隐藏中会有一个动画：

public partial class SingleLine : UserControl
{
    List<Rect> boundingBoxes;
    double extent;

    public SingleLine()
    {
        InitializeComponent();
    }

    public SingleLine(Geometry geo, List<Rect> boundingBoxes, double totalExtent) : this()
    {
        Target.Data = geo;
        extent = totalExtent;
        Rect clip = boundingBoxes.Aggregate(Rect.Union);
        Clip = new RectangleGeometry(clip);
        this.boundingBoxes = boundingBoxes;
    }

    public async Task Play()
    {
        var storyboard = (Storyboard)Target.Resources["AnimationStoryboard"];
        var fromAnimation = (DoubleAnimation)storyboard.Children[0];
        var toAnimation = (DoubleAnimation)storyboard.Children[1];

        foreach (var b in boundingBoxes)
        {
            await Task.Delay(250); // перерыв между буквами
            fromAnimation.From = b.Left / extent;
            fromAnimation.To = b.Right / extent;
            toAnimation.From = b.Left / extent;
            toAnimation.To = b.Right / extent;
            storyboard.Begin();
            await Task.Delay(250); // дождёмся конца анимации
        }
    }
}

为什么我们需要这样复杂的Clip和totalExtent？不幸的是，我没有找到一种方法来只咬出所需的几何部分。因此，我们将整个几何图形作为输入，但我们只想显示当前行。为此，我们计算出一个对应于几何图形所需部分（当前行）的矩形，并用Clip'a. 但是我们的比率计算（b.Left / extent等）需要占'a总宽度的百分比Path，而不是当前行的宽度！（回想一下，我们Path获取整条线的几何形状，也包括其余线。）因此，我们还必须传递总宽度。

现在是主要代码。随着部分功能的分离，它变得更简单了。在其中，我们不能放一个 fixed Path，因为我们事先不知道行数。因此，我们将动态添加控件。

主窗口看起来很简单：

<Window x:Class="KaraokeText.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Тест" Height="350" Width="525">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Name="Container">
        <TextBlock Name="Source" FontSize="24" Visibility="Hidden" TextWrapping="Wrap"
                   Text="А-а, в Африке реки вот такой ширины &#x000d;А-а, в Африке горы вот такой вышины"/>
    </Grid>
</Window>

和代码隐藏：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Loaded += (o, args) => Create(); // вначале запустим Create
        PreviewKeyDown += (o, args) => Play(); // а по нажатию клавиши - Play
    }

    // список контролов, отображающих строки
    List<SingleLine> lineControls = new List<SingleLine>();

    void Create() // https://msdn.microsoft.com/en-us/library/ms745816(v=vs.110).aspx
    {
        TextBlock tb = Source;
        var text = tb.Text;
        FormattedText formattedText = new FormattedText(
            text,
            CultureInfo.GetCultureInfo("en-US"),
            FlowDirection.LeftToRight,
            new Typeface(
                tb.FontFamily,
                tb.FontStyle,
                tb.FontWeight,
                tb.FontStretch),
            tb.FontSize,
            Brushes.Black);

        // установили максимальную ширину, чтобы текст был разбит на части
        formattedText.MaxTextWidth = Source.ActualWidth;

        var boundingBoxes =  // побуквенная ширина и позиции
            Enumerable.Range(0, text.Length)
                      .Where(k => !char.IsWhiteSpace(text[k]))
                      .Select(k => formattedText.BuildHighlightGeometry(new Point(), k, 1)
                                                .Bounds)
                      .ToList();

        // вычисляем охватывающий прямоугольник всех прямоугольников
        var totalBb = boundingBoxes.Aggregate(Rect.Union);
        var totalExtent = totalBb.Width;

        List<List<Rect>> boundingBoxesByLine = new List<List<Rect>>();
        List<Rect> currentLine = null;
        double lastRectBottom = double.NegativeInfinity;
        foreach (var rect in boundingBoxes)
        {
            // проверка на новую строку. если верх текущего прямоугольника там же,
            // где низ предыдущего прямоугольника, или ещё ниже - новая строка, иначе нет
            if (rect.Top >= lastRectBottom)
            {
                // добавим старую строку в список строк
                if (currentLine != null)
                    boundingBoxesByLine.Add(currentLine);
                // новый пустой контейнер прямоугольников для новой строки
                currentLine = new List<Rect>();
            }
            currentLine.Add(rect);
            lastRectBottom = rect.Bottom;
        }
        if (currentLine != null) // последнюю строку не теряем
            boundingBoxesByLine.Add(currentLine);

        // стащили геометрию у текста...
        var geo = formattedText.BuildGeometry(new Point());

        // строим по контролу для каждой строки:
        foreach (var line in boundingBoxesByLine)
        {
            // ... отдавая ему геометрию:
            var lineControl = new SingleLine(geo, line, totalExtent);
            Container.Children.Add(lineControl);
            lineControls.Add(lineControl);
        }
    }

    async void Play()
    {
        // проигрываем просто построчно
        foreach (var line in lineControls)
            await line.Play();
    }
}

一切！

结果：