WebBrowser control is an awesome way to display rich HTML content, sadly we can only use it with OOB applications. I decided that although the preferred way of using my app is to install it on the desktop (and see the WebBrowser control), I still want to show something, maybe less fancy data when the app is running in the browser. So I created two DataTemplates one for OOB and one for the browser.

In my UserControl XAML I simply have a named ItemsControl:

And in C# I load the DataTemplate for this ItemsControl based on the situation:

Loading XAML from String

Loading XAML from a string is really easy, you only need to use one method – XamlReader.Load(xamlString); and cast it to whatever element you need to use it as. The important part here is that you need to reference all the same namespaces you reference in your other XAML files, cause this XAML doesn’t know anything about those.

This code example shows the DataTemplate that I use when the app is running on the browser, the other template has slightly different layout and uses the WebBrowser control. Of course you could also load the template from a file, have one default template defined in XAML and only override it when running out of browser – then you’d also see something design time :).