Sunday, September 2, 2012

HOWTO: Provide in-app help using HTML content in Windows 8 Metro-style apps (XAML)

In my Windows 8 XAML app, I was looking to provide some basic integrated help content. I had some simple requirements:

  • Provide integrated help that looks and feels like it is part of the app
  • Also provide help online for those who visit the apps' website to check it out
  • Avoid duplicating content
  • Be able to deliver updated help to the app after the it has been installed on a device
  • Always provide meaningful help content in the app even when there is no network connection available

To me, an easy choice was to create the help content using HTML, host it online - and have the app pull the content from the internet. This meant hosting a web browser control in XAML and providing some fallback in case there are connectivity problems or if the site isn't reachable for some reason. 

To achieve this, I created a wrapper around the web browser control in WinRT XAML to display HTML content from my support website and fallback to local HTML resources shipped with the app. The key part of the control is to try to load a URL, and if that is not possible, try to show a local HTML file (packaged with the app).

Using the control is simple - just set the Url, and FallbackUrl:


The actual control is implemented as follows:


That's it - and you have a quick and easy way to show some simple HTML content from the web in your XAML app - which is useful for things like in-app help.

I've hosted the sample on github: https://github.com/krishna-nadiminti/code-musings/tree/master/Metro.Controls if you want to check it out.

No comments:

Post a Comment