UWP中ListBox内WebView绑定含HTML文本无法显示的解决方法

首先，咱们先梳理下你当前代码里的核心问题，再给出针对性的解决方案：

1. 先修正WebView绑定的基础错误 #

你XAML里的Source={x:Bind:Option}是语法错误，正确写法应该是{x:Bind Option}，但更关键的是：WebView的Source属性只接受Uri类型，而你的Option是HTML字符串，直接绑定Source根本无法加载内容——得用NavigateToString方法来加载HTML字符串。

2. 实现WebView绑定HTML字符串的方案 #

因为WebView没有原生支持绑定HTML字符串的属性，咱们可以写一个附加属性来实现这个功能，这样就能在XAML里优雅地绑定内容了：

步骤1：创建WebView附加属性 #

public static class WebViewExtensions
{
    public static readonly DependencyProperty HtmlContentProperty =
        DependencyProperty.RegisterAttached("HtmlContent", typeof(string), typeof(WebViewExtensions), 
            new PropertyMetadata(null, OnHtmlContentChanged));

    public static string GetHtmlContent(DependencyObject obj)
    {
        return (string)obj.GetValue(HtmlContentProperty);
    }

    public static void SetHtmlContent(DependencyObject obj, string value)
    {
        obj.SetValue(HtmlContentProperty, value);
    }

    private static void OnHtmlContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var webView = d as WebView;
        if (webView == null || string.IsNullOrEmpty(e.NewValue?.ToString()))
            return;

        // 加载传入的HTML字符串
        webView.NavigateToString(e.NewValue.ToString());
    }
}

步骤2：修改XAML代码 #

把原来的WebView绑定改成用附加属性，记得替换命名空间：

<ListBox Name="ListOption" Grid.Row="4" Margin="0,20,10,0" 
         xmlns:m="using:KipinMobile_Win10.TryoutData.Models"
         xmlns:local="using:你的项目命名空间" <!-- 替换成附加属性所在的命名空间 -->
         SelectionChanged="ListAlternatives_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="m:DBOption">
            <StackPanel Orientation="Horizontal">
                <WebView local:WebViewExtensions.HtmlContent="{x:Bind Option}" 
                         Width="300" Height="Auto"/> <!-- 建议设置合适的宽高，避免WebView布局异常 -->
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

3. 更轻量的替代方案：用RichTextBlock解析HTML #

WebView是重型控件，在ListBox这类滚动列表里大量使用容易出现性能问题（比如滚动卡顿）。如果你的HTML只是<p>、<img>这类简单标签，更推荐用RichTextBlock来解析显示，性能更优。

实现思路：HTML转RichTextBlock内容 #

写一个转换器，把HTML字符串转换成RichTextBlock的内容，这里给你一个简化版实现（处理<p>和<img>标签）：

转换器代码

public class HtmlToRichTextConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var html = value as string;
        if (string.IsNullOrEmpty(html))
            return new RichTextBlock();

        var richTextBlock = new RichTextBlock();
        // 拆分段落标签
        var paragraphs = html.Split(new[] { "<p>", "</p>" }, StringSplitOptions.RemoveEmptyEntries);
        foreach (var para in paragraphs)
        {
            var paragraph = new Paragraph();
            // 拆分图片标签，混合处理文本和图片
            var contentParts = para.Split(new[] { "<img src=\"", "\"/>" }, StringSplitOptions.None);
            for (int i = 0; i < contentParts.Length; i++)
            {
                if (i % 2 == 0)
                {
                    // 处理文本内容
                    paragraph.Inlines.Add(new Run { Text = contentParts[i] });
                }
                else
                {
                    // 处理图片内容
                    var imageUri = new Uri(contentParts[i], UriKind.RelativeOrAbsolute);
                    var imageInline = new InlineUIContainer();
                    var image = new Image { Source = new BitmapImage(imageUri), Width = 100, Height = 100 };
                    imageInline.Child = image;
                    paragraph.Inlines.Add(imageInline);
                }
            }
            richTextBlock.Blocks.Add(paragraph);
        }
        return richTextBlock;
    }

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

修改XAML使用RichTextBlock

<ListBox Name="ListOption" Grid.Row="4" Margin="0,20,10,0" 
         xmlns:m="using:KipinMobile_Win10.TryoutData.Models"
         xmlns:local="using:你的项目命名空间"
         SelectionChanged="ListAlternatives_SelectionChanged">
    <ListBox.Resources>
        <local:HtmlToRichTextConverter x:Key="HtmlToRichTextConverter"/>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate x:DataType="m:DBOption">
            <ContentControl Content="{x:Bind Option, Converter={StaticResource HtmlToRichTextConverter}}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

额外补充 #

• 如果需要处理更复杂的HTML标签，可以借助HtmlAgilityPack这类开源库来解析HTML结构，再转换成RichTextBlock的内容。
• 用WebView时，尽量给它设置固定宽高或者让它自适应内容，避免出现空白或布局溢出的问题。

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