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)
{
webBrowserControl.NavigateToString(FormatHTML("Local_HTML_Filepath"));
}
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'>");
htmlText.Append(myStreamReader.ReadToEnd());
htmlText.Append("</font>");
htmlText.Append("</body>");
htmlText.Append("</html>");
result = htmlText.ToString();
}
}
}
return result;
}
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.
Adios!
Modern Developer Ramblings 
2 thoughts on “Styling local HTML for WebBrowser display”