Styling local HTML for WebBrowser display

Recently I had to work on a cross-platform mobile app, meant for internal use in our company. The iOS & Android versions were ready to ship; Windows Phone 7 just could not lag behind. It was mostly static content (lots of it) to display and centralization of data was important for content updates. Even before the Windows Phone app was started, much of the content was centralized for mobile device consumption and the format was HTML. Since it was mostly textual data with bulleted sections, I guess it was decided to marry pure data with some display pieces.

So, now the challenge was to design a Windows Phone 7 app that had rich metro UI; but mostly rendered HTML! The control of choice to display all this data was the WebBrowser control, which takes remote or local HTML and renders content using the IE shell in a Windows Phone. Thankfully, the content only had HTML snippets of data and not a full HTML DOM that the WebBrowser renders; so there was an opportunity to style some of the content to match the theme of the Windows Phone app. So, essentially, right before we hand-off the local HTML to our WebBrowser control, we got to give it some header/metedata or styling information.

I cannot post screenshots of the WP7 app for confidentiality; but here’s some code in use:

    private void webBrowserControl_Loaded(object sender, RoutedEventArgs e)

    private string FormatHTML(string filePath)
       string result = string.Empty;
       var ResourceStream = Application.GetResourceStream(new Uri(filePath, UriKind.Relative));

       if (ResourceStream != null)
          Stream myFileStream = ResourceStream.Stream;

          if (myFileStream.CanRead)
              using (StreamReader myStreamReader = new StreamReader(myFileStream))
                  StringBuilder htmlText = new StringBuilder();
                  htmlText.Append("<html><meta name='viewport' content='width=400,user-scalable=no'/>");
                  htmlText.Append("<body bgcolor='ThemeColor'>");
                  htmlText.Append("<font color='SomeFontColor' size='SomeSize'>");
                  htmlText.Append("<link rel='stylesheet' type='text/css' href='someURI'>");
                  result = htmlText.ToString();

       return result;

Now, before you start thinking this is all too basic, there are couple of very important caveats. First, the HTML rendered by the webbrowser control cannot have a transparent background ; so your hopes of preserving the theme of the underlying XAML page are futile. Also, any URI references that you make towards styling the content cannot come from local application package !! For example, if you have an image that you package as a resource/content in your Windows Phone project, it cannot be used as a background image for your HTML content. Needless to say, I find this restrictive and had to fight my way around this. If someone knows a way to use local resources for styling, please please drop me a comment.

So, essentially we have two options for referencing media or CSS for styling our HTML for the WebBrowser to render. One — make the resource available on the internet; that is, through an unique absolute HTTP URL. Or Two — store the resource as a file in Isolated Storage on the phone and then use the relative filepath from isolated storage in your CSS. These are the only two ways I know how to reference an external resource while styling HTML. Like I said, I would love to hear how other’s are doing this or any other ideas.



2 thoughts on “Styling local HTML for WebBrowser display

Leave a Reply

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

You are commenting using your 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 )

Connecting to %s