Xamarin Forms: WebView data binding

Question

I'm trying to build a page which uses data binding to fill a WebView which is hosted on a StackLayout. Here's the XAML for that content page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GES.Views.DetailsPage"
             xmlns:di="clr-namespace:GES.DI;assembly=GES"
             xmlns:c="clr-namespace:GES.Views.Converters;assembly=GES"     
             di:ServiceLocator.AutoWireViewModel="true"
             Padding="15, 10, 15, 10"
             Title="Ensino Superior">
    <ContentPage.Resources>
        <ResourceDictionary>
            <c:HtmlSourceConverter x:Key="htmlConverter"/>
            <Style x:Key="title" TargetType="Label">
                <Setter Property="FontAttributes" Value="Bold" />
                <Setter Property="TextColor" Value="{StaticResource colorPrimary}" />
                <Setter Property="FontSize" Value="16" />
            </Style>
            <Style x:Key="dateText" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource lightGray}" />
                <Setter Property="FontSize" Value="10"></Setter>
                <Setter Property="FontAttributes" Value="Bold"></Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <ScrollView>
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Label Text="{Binding Path=News.Title}" 
                           Margin="0, 10, 0, 10"
                           Style="{StaticResource title}"></Label>
                    <Label Text="{Binding Path=News.PublicationDate, StringFormat='{0:dd/MM/yyyy}'}" 
                           HorizontalTextAlignment="End"
                           Margin="0, 0, 10, 10"
                           Style="{StaticResource dateText}"></Label>
                    <WebView Margin="0, 10, 0, 10"
                             Source="{Binding Path=News.Contents, Converter={StaticResource htmlConverter}}">
                    </WebView>
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Since the News.Contents property returns an HTML snippet, I've built a custom converter to transform the text into an HtmlWebViewSource:

public class HtmlSourceConverter: IValueConverter{
    public object Convert(object value,
                          Type targetType,
                          object parameter,
                          CultureInfo culture) {
        var html = new HtmlWebViewSource();
        if (value is string h &&
            !string.IsNullOrEmpty(h)) {
            html.Html = HttpUtility.HtmlDecode(h);
        }

        return html;
    }


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

Now, the problem. When the page is loaded, the WebView component will only render a small white rectangle...Rotating the device (ex.: going from portrai to landscape or vice-versa) does show the WebView's content. For instance, lets assume I'm using the device in portrait mode. Loading the page shows the following:

However, if I rotate my device, it will show the contents:

It looks like the WebView is not rendering correctly on first load...Btw, if I load the page on landscape, then I'll have to turn into portrait mode to see anything...

I've tried searching online and I did find an old bug, but it seems like it has been fixed (I'm using the latest stable version of the Xamarin Forms assembly)

Any clues on what's going on?

Have you tried setting the height of the webview explicitly? — Sparsha Bhattarai
not the requested height... i did try to use one of the fill options though... — Luis Abreu
There's an existing issue with webview in which the height is not updated dynamically and the height remains 0 as in the beginning. Let me know if it works. — Sparsha Bhattarai

Luis Abreu Luis Abreu · Accepted Answer · 2019-05-17T10:17:54

-1

votes

For anyone interested, I've followed this post to create a custom webview renderer...

Xamarin Forms: WebView data binding

1 Answers