XAML WebView binding to HTML source not working

Question

I have a XAML page layout defined that includes a WebView populated from an HTML string:

<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>

When I hard code the string into the XAML it displays correctly, but it will not bind to the Flag.Description string. The XAML includes a couple of labels that bind correctly but I can't find any reason why the WebView source isn't binding correctly.

score 10 · Accepted Answer · answered Apr 07 '16 at 21:13

I wasn't able to get the binding to work in XAML but there is a code-based solution to the problem. I'm using FreshMvvm so in the page model (not the code-behind for the XAML page) I created a new property that references the HTML string:

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

And the WebView element in the XAML page becomes:

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

score 3 · Answer 2 · answered Mar 21 '17 at 15:51

The accepted answer worked for me but I will add that it only works when you specify a height and width.

There are a few combinations that worked:

1. define HeightRequest and WidthRequest

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

2. define HorizontalOptions and VerticalOptions

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

However, when I specifed CenterAndExpand as a value, the HTML did not render

score 0 · Answer 3 · answered Apr 07 '16 at 05:15

0

Seems like Binding Html property for HtmlWebViewSource just won't work out of the box. I think a IValueConverter will do the job. Please have a look how it is done in this answer. I think that should be enough

answered Apr 07 '16 at 05:15

Sreeraj

2,306
2
18
31

I created an IValueConverter but it had no effect. Fundamentally the binding declaration wasn't working so the converter was never invoked. – David Clarke Apr 07 '16 at 21:14

score 0 · Answer 4 · answered Dec 03 '17 at 17:01

0

Would Flag or Flag.Description ever return null to the WebView? I was having the same problem and it turns out that the default value for my source was null before I initialized it with proper content. The WebView would essentially crashed. When I changed the null to String.Empty, it would work.

answered Dec 03 '17 at 17:01

The `Flag.Description` property is populated in the `FlagPageModel.Init()` override. Initialising the `Flag` object to default values isn't something I tried. – David Clarke Dec 03 '17 at 19:07

score 0 · Answer 5 · answered Feb 19 '20 at 11:29

0

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

answered Feb 19 '20 at 11:29

Justice Rakgwale

1

2

This may answer the question. However, code only answers are not as useful as answers that document the code or have an detailed explanation on why this code is the solution to the question. – RyanNerd Feb 19 '20 at 19:39

XAML WebView binding to HTML source not working

5 Answers5