11 Comments

image

The WebBrowser control in Windows Phone 8 has one serious problem: It sometimes forgets to render the HTML. This happens with the NavigateToString-method, Navigate-method works fine. Unfortunately though this problems also affects the Windows Phone 7 apps deployed to Windows Phone 8 phones.

After the repro, the bottom part of this post shows one hack which gets around this problem.

Repro

Here’s a simple repro of the problem. The program can display the HTML page either by navigating to the URL or by downloading the content to string and using the NavigateToString. The same app has been deployed to both the Windows Phone 7 and Windows Phone 8 emulators (this problem is visible also on the real devices).

The code:

public partial class MainPage 
{ 
    private const string url = "http://assets.softwaremk.org/temp/NotWorking.html"; 

    public MainPage() 
    { 
        InitializeComponent(); 
    }

    private async void NavigateStringClick(object sender, RoutedEventArgs e) 
    { 
        var client = new WebClient(); 
        var content = await client.DownloadStringTaskAsync(url);

        WebBrowser.NavigateToString(content); 
    }

    private void NavigateUrlClick(object sender, RoutedEventArgs e) 
    { 
        WebBrowser.Navigate(new Uri(url)); 
    } 
}

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
    Some content
</body>
</html>

Test results

Windows Phone 7 & Navigate

OK

image

Windows Phone 7 & NavigateToString

OK

image

Windows Phone 8 & Navigate

OK

image

Windows Phone 8 & NavigateToString

BROKEN

image

Observations

The problem seems to be related to the HTML meta tags. The test HTML has two meta tags and if either of them is removed, the page is displayed correctly.

Solution

Here’s a solution which gets around this problem. It’s not beautiful by any means but it seems to do the trick.

  1. Download the HTML content as string
  2. Store it to the IsolatedStorage
  3. Use WebControl to navigate to the isolated storage
var client = new WebClient(); 
var content = await client.DownloadStringTaskAsync(url);

var store = IsolatedStorageFile.GetUserStoreForApplication();

using (var writeFile = new StreamWriter(new IsolatedStorageFileStream("htmlcontent.html", FileMode.Create, FileAccess.Write, store))) 
{ 
    writeFile.Write(content); 
    writeFile.Close(); 
}

var uri = new Uri("htmlcontent.html", UriKind.Relative);

WebBrowser.Navigate(uri);

Result:

image