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)

reflection

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

Share

About these ads

11 Responses to Loading a Local HTML File in the WebBrowser Control

  1. Pingback: Tweets that mention Loading a Local HTML File in the WebBrowser Control « Phone 7 -- Topsy.com

  2. Pingback: Alberto Silva

  3. PHenry says:

    Thank you very much for your help with this. I’ve been wracking my brains all night on something that SHOULD be very simple. Thanks for the heads up! I have to blog about this so I don’t forget now!

    • keyboardP says:

      No problem! I’ve seen this question crop up quite a few times since the first version of the WP7 SDK, so figured I’d create a post about it :)

  4. AlexBordeaux says:

    Hi,
    Didn’t get why you are using a streamreader.
    I just added my html file to a resource (for example added MyPage.html to Resource.resx) as a text file.
    Then I can access it in the code by calling directly the resources:

    MessageBox.Show( Resouce.MyPage );

    It returns the content of the file.. so you could easyly navigate to it with the browser.

    • keyboardP says:

      Hi,

      No particular reason. These methods were tested using the early beta versions of the SDK, so it was a case of getting the method to work in the first place. Your method sounds pretty good and should also do the trick. Are you able to load in external images and CSS files via the resource and display them in the HTML file? In other methods, it seems you have to copy the HTML file (and the images/CSS file) into the app’s isolated storage as it can only be accessed from there.

  5. siva says:

    its not working in my system.how to solve it ?

    • keyboardP says:

      Hi Siva,
      It should work. Try this tutorial.

  6. siva says:

    hi,in my system are u missing any reference for “assembly” ?
    like this is asking
    how to solve this

    • keyboardP says:

      You’ll get quicker answers if you post on Stackoverflow. Without code, I can only guess what you’re missing, but have you added the XNA assembly reference? Use NavigationService to move to another page.

  7. siva says:

    hi if i click a button then it go to another xaml page and in that xaml page webrowser display html content.how it can be done?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 42 other followers

%d bloggers like this: