XAML WebView 绑定到 HTML 源不起作用答案

【问题标题】：XAML WebView binding to HTML source not workingXAML WebView 绑定到 HTML 源不起作用
【发布时间】：2016-07-27 19:04:26
【问题描述】：

我定义了一个 XAML 页面布局，其中包含一个从 HTML 字符串填充的 WebView：

<WebView HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding Flag.Description}" />
<!--    <HtmlWebViewSource Html="&lt;html>&lt;body>&lt;p>The HTML string.&lt;/p>&lt;/body>&lt;/html>" />-->
    </WebView.Source>
</WebView>

当我将字符串硬编码到 XAML 中时，它会正确显示，但不会绑定到 Flag.Description 字符串。 XAML 包含几个正确绑定的标签，但我找不到 WebView 源未正确绑定的任何原因。

【问题讨论】：

标签： xaml xamarin xamarin.forms freshmvvm

【解决方案1】：

似乎为HtmlWebViewSource 绑定Html 属性无法开箱即用。我认为IValueConverter 可以完成这项工作。请在answer 中查看它是如何完成的。我觉得应该够了

【讨论】：

我创建了一个 IValueConverter 但它没有效果。从根本上说，绑定声明不起作用，因此从未调用过转换器。

【解决方案2】：

我无法让绑定在 XAML 中工作，但有一个基于代码的解决方案来解决这个问题。我正在使用FreshMvvm，所以在页面模型（不是 XAML 页面的代码隐藏）中，我创建了一个引用 HTML 字符串的新属性：

public HtmlWebViewSource WebViewSource
{
    get { 
        return new HtmlWebViewSource { Html = Flag.Description }; 
    }
}

XAML 页面中的WebView 元素变为：

<WebView
    HorizontalOptions="Fill"
    VerticalOptions="FillAndExpand"
    Source="{Binding WebViewSource}" />

【讨论】：

【解决方案3】：

接受的答案对我有用，但我要补充一点，它仅在您指定高度和宽度时才有效。

有一些组合有效：

1。定义 HeightRequest 和 WidthRequest

<WebView Source="{Binding HtmlSource}" HeightRequest="300" WidthRequest="250" />

2。定义 HorizontalOptions 和 VerticalOptions

<WebView x:Name="WebViewTermsOfService" Source="{Binding HtmlSource}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />

但是，当我将 CenterAndExpand 指定为值时，HTML 没有呈现

【讨论】：

【解决方案4】：

Flag 或 Flag.Description 是否会向 WebView 返回 null？我遇到了同样的问题，事实证明，在我用正确的内容初始化它之前，我的源的默认值为 null。 WebView 基本上会崩溃。当我将 null 更改为 String.Empty 时，它会起作用。

【讨论】：

Flag.Description 属性填充在 FlagPageModel.Init() 覆盖中。我没有尝试将Flag 对象初始化为默认值。

【解决方案5】：

public HtmlWebViewSource Description { get { var webView = "html content";return
 new HtmlWebViewSource { Html = webView };} }
<WebView
  HorizontalOptions="Fill"
  VerticalOptions="FillAndExpand"
  Source="{Binding Description}" />

【讨论】：

这可能会回答这个问题。但是，仅代码的答案不如记录代码或详细解释为什么此代码是问题的解决方案的答案有用。