.NET Maui中XML内容查看器如何实现搜索内容高亮？

下面提供几种实用的实现方案，根据你的需求选择即可：

方案1：使用Label的FormattedText实现基础高亮（适合纯查看场景） #

由于Editor控件不支持富文本格式，若你的XML查看器仅需展示无需编辑，推荐用Label替代，通过其FormattedText属性实现匹配内容高亮：

XAML代码 #

<Entry x:Name="XmlFilterEntry" Placeholder="输入过滤关键词" TextChanged="XmlFilterEntry_TextChanged" />
<Label x:Name="XmlDisplayLabel" LineBreakMode="WordWrap" FontFamily="Monospace" />

后台逻辑 #

private void XmlFilterEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    var filterKeyword = e.NewTextValue?.Trim();
    var formattedXml = PrettifyXML(YourOriginalXmlContent); // 调用你已有的XML格式化方法

    if (string.IsNullOrEmpty(filterKeyword))
    {
        // 无过滤词时直接展示原格式化XML
        XmlDisplayLabel.FormattedText = new FormattedString
        {
            Spans = { new Span { Text = formattedXml } }
        };
        return;
    }

    var resultString = new FormattedString();
    int currentPos = 0;
    int matchIndex;

    // 循环查找所有匹配项并分段设置样式
    while ((matchIndex = formattedXml.IndexOf(filterKeyword, currentPos, StringComparison.OrdinalIgnoreCase)) != -1)
    {
        // 添加匹配前的普通文本
        if (matchIndex > currentPos)
        {
            resultString.Spans.Add(new Span
            {
                Text = formattedXml.Substring(currentPos, matchIndex - currentPos)
            });
        }

        // 添加高亮的匹配文本
        resultString.Spans.Add(new Span
        {
            Text = formattedXml.Substring(matchIndex, filterKeyword.Length),
            ForegroundColor = Colors.DarkRed,
            FontAttributes = FontAttributes.Bold
        });

        currentPos = matchIndex + filterKeyword.Length;
    }

    // 添加剩余未匹配的文本
    if (currentPos < formattedXml.Length)
    {
        resultString.Spans.Add(new Span
        {
            Text = formattedXml.Substring(currentPos)
        });
    }

    XmlDisplayLabel.FormattedText = resultString;
}

方案2：使用WebView渲染带高亮的HTML（适合复杂高亮需求） #

如果需要同时实现XML语法高亮+关键词高亮，可将XML转换为带HTML标记的内容，通过WebView加载展示：

XAML代码 #

<Entry x:Name="XmlFilterEntry" Placeholder="输入过滤关键词" TextChanged="XmlFilterEntry_TextChanged" />
<WebView x:Name="XmlWebView" />

后台逻辑 #

private void XmlFilterEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    var filterKeyword = e.NewTextValue?.Trim();
    var formattedXml = PrettifyXML(YourOriginalXmlContent);
    string htmlContent;

    if (string.IsNullOrEmpty(filterKeyword))
    {
        // 无过滤词时，仅展示格式化后的XML
        htmlContent = $@"
        <html>
            <body style='font-family: monospace; white-space: pre; margin: 8px;'>
                {System.Web.HttpUtility.HtmlEncode(formattedXml)}
            </body>
        </html>";
    }
    else
    {
        // 转义XML内容后，将匹配关键词替换为高亮标签
        var encodedXml = System.Web.HttpUtility.HtmlEncode(formattedXml);
        var highlightedXml = encodedXml.Replace(
            System.Web.HttpUtility.HtmlEncode(filterKeyword),
            $"<span style='background-color: #ffff66; font-weight: bold;'>{System.Web.HttpUtility.HtmlEncode(filterKeyword)}</span>",
            StringComparison.OrdinalIgnoreCase);
        
        htmlContent = $@"
        <html>
            <body style='font-family: monospace; white-space: pre; margin: 8px;'>
                {highlightedXml}
            </body>
        </html>";
    }

    XmlWebView.Source = new HtmlWebViewSource { Html = htmlContent };
}

方案3：第三方富文本控件（需编辑场景） #

如果你的查看器需要支持XML编辑+高亮，可选用Maui生态的第三方富文本控件（如Syncfusion.Maui.RichTextEditor），这类控件原生支持富文本样式设置，可直接对匹配内容标记高亮。

内容的提问来源于stack exchange，提问作者dembo