Xamarin.Forms中Label绑定ViewModel的HTML文本渲染异常问题

问题根源 #

你从API获取的HTML文本是双重HTML转义的（比如<strong...是<strong>经过两次转义的结果）：

• 直接在XAML中写入时，XAML解析器会自动完成一次转义，将文本还原为可识别的HTML标签，因此能正常渲染样式；
• 通过ViewModel绑定加载时，字符串是原始的双重转义内容，Label的Html解析仅处理一次转义，无法识别标签，导致渲染异常。

解决方法 #

方法1：手动双重解码文本 #

在ViewModel中获取API返回的字符串后，调用两次System.Net.WebUtility.HtmlDecode方法，将文本还原为原始HTML标签：

using System.Net;

// 假设apiHtml是从API获取的双重转义字符串
var onceDecoded = WebUtility.HtmlDecode(apiHtml);
var usableHtml = WebUtility.HtmlDecode(onceDecoded);
// 将usableHtml赋值给绑定的属性
this.HtmlContent = usableHtml;

解码后文本会变成：Get help with your health related questions <strong style="color:#007ABC;">when you sign up to become an awesome holder.</strong>，Label即可正常渲染样式。

方法2：调整API返回格式（优先推荐） #

联系后端开发人员，让API直接返回单次转义的原始HTML文本（即包含<strong>等标签的正常HTML代码），这样前端无需额外处理，直接绑定即可正常渲染。

方法3：自定义绑定转换器（批量场景适用） #

如果多个页面需要处理此类转义文本，可编写一个自定义转换器，在绑定过程中自动完成双重解码：

1. 创建转换器类：

using System;
using System.Globalization;
using System.Net;
using Xamarin.Forms;

public class HtmlDoubleDecodeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string htmlStr)
        {
            var decoded = WebUtility.HtmlDecode(htmlStr);
            return WebUtility.HtmlDecode(decoded);
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中引用并使用转换器：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.YourPage">
    <ContentPage.Resources>
        <local:HtmlDoubleDecodeConverter x:Key="HtmlDoubleDecodeConverter" />
    </ContentPage.Resources>

    <Label Text="{Binding HtmlContent, Converter={StaticResource HtmlDoubleDecodeConverter}}" 
           TextType="Html" />
</ContentPage>

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