Loading a Local HTML File in the WebBrowser Control

There was an interesting post over on the official WP7 Development forums. The nature of it wasn’t necessarily interesting, but it was something that seems quite straightforward on the surface but required a bit more thinking that I had initially thought. You can see the question here, but it was essentially “How do you display a local HTML file in a WebBrowser control“. I’ve never used Silverlight before Windows Phone 7, so the answer may be obvious to some, but I figured I’d write a quick blog post about it anyway for those who don’t know. The easy way to do this is to simply have your entire HTML stored in a string variable and call the WebBrower.NavigateToString() method. This works, but can be quite tedious. Firstly, if your HTML is long, it could quickly become tedious copy and pasting into the VS IDE and making sure that all necessary characters are escaped so that the entire HTML content is one string. Secondly, if you have multiple HTML files, then you’d have to do that for each HTML file.I figured there must be another, probably better, way of doing it.

I changed the HTML file’s ‘Build Action‘ from ‘Content‘ to ‘Embedded Resource’ and fired up Reflector. I loaded my DLL and confirmed that the test.html file was embedded (see image below), and should therefore be available with a bit of reflection code. (Click image to see larger version)

First, I used the Assembly.GetManifestResourceNames() method in order to see the location of the test file. Turns out, it was simply ProjectName.Filename.Extension (in this case, MediaTest.test.html). With that knowledge, I simply loaded the resource into a stream, read the stream into a string and loaded the string into the WebBrowser control’s NavigateToString() method. The code below should do the trick (make sure your html file(s) is set to ‘Embedded Resource’).

  Stream stream = Assembly.GetExecutingAssembly()
                 .GetManifestResourceStream("<ProjectName>.MyHtmlFile.html");
  StreamReader reader= new StreamReader(stream);
  string html = reader.ReadToEnd();
  webBrowser1.NavigateToString(html);

As I say, this may be common knowledge, but it’s the first time I came across this problem and it seemed like there would be a simple solution. Or maybe there is? If you know an easier way, feel free to comment. I should add, ‘Reflection’ should be used sparingly as it’s not the most efficient of things. However, this method can save a lot of time from having to manually format and escape characters.

Update – You can also use Application.GetResourceStream. Simply set your HTML file as ‘content’ type and use the code below to get the stream.

var rs = Application.GetResourceStream(new Uri("myFile.html", UriKind.Relative));
StreamReader sr = new StreamReader(rs.Stream);

 

Another way to do it requires you to import the Microsoft.Xna.Framework assembly. If you don’t mind referencing this assembly in your application, then you can simply use the newly added (XNA 4.0) TitleContainer.OpenStream() method like so:

StreamReader reader = new StreamReader(TitleContainer.OpenStream("test.html"));
webBrowser1.NavigateToString(reader.ReadToEnd());

Set your HTML file to have a Build Action of Content.

The second method looks a lot shorter and simpler, but the first code could easily be refactored to make it shorter. I just made it slightly more verbose to explain the points.

Hope this helps other developers!

Retweet This Post

–@keyboardP