Skip to main content

Binding a HTML-formatted string to a WPF WebBrowser control

Sometimes there is a need to display a HTML formatted string in a WPF application. There are a couple of ways to do this, but the most stright forward is to use a WebBrowser control and the NavigateToString method.

This approach has one big flaw, you cannot use binding to a string out of the box, but I found a great solution through Stack Overflow which adds a bindable property to the  WebBrowser control using  NavigateToString.

The following class is all that is needed to add that behavior. A new depencency property named Html is introduced to the  WebBrowser and the proper change action is performed in the OnHtmlChanged method.

public class BrowserBehavior
{
    public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached(
        "Html", typeof(string), typeof(BrowserBehavior), new FrameworkPropertyMetadata(OnHtmlChanged));

    [AttachedPropertyBrowsableForType(typeof(WebBrowser))]
    public static string GetHtml(WebBrowser browser)
    {
        return (string)browser.GetValue(HtmlProperty);
    }

    public static void SetHtml(WebBrowser browser, string value)
    {
        browser.SetValue(HtmlProperty, value);
    }

    static void OnHtmlChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
        var browser = dependencyObject as WebBrowser;
        if (browser != null)
        {
            browser.NavigateToString(e.NewValue);
        }
    }
}

To bind this property the XAML looks like this:
<WebBrowser local:BrowserBehavior.Html="{Binding Path=HtmlText}"></WebBrowser>

Since we are printing some swedish characters the encoding got a little bit funky. This is nothing that the  WebBrowser control itself affects, but it has to be set with an encoding meta tag in the HTML. So simply add the following meta tag to the head section of the HTML to be shown in the browser control:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Another thing that does not seem to be able to affect on the  WebBrowser control is the context menu. The default context menu is the same as you would get in an Internet Explorer window. When using the  NavigateToString method to add the content the navigation in the browser control will not work. Hence we would like to hide the context menu. The easiest way to do so is with a litte javascript in the rendered HTML:
<body oncontextmenu="return false;">

By adding these little hacks we have an easy way to show HTML content in a bindable fashion. Sure there are still some caveats to this solution, for instance an F5 keystroke will refresh the browser window. But we cannot use WebBrowserShortcutsEnabled since we want the users to be able to copy text from the browser using the Ctrl-C shortcut.

Comments

  1. Does not make sense if you are reading it and you want start from scratch.
    Does not show what components have to be implemented.
    Actually , looking for solution how to make some kind of html viewer that points to html file make works ( of course I can read the html file to string variable )
    For instance " browser.NavigateToString(e.NewValue);"
    I tried browser.NavigateToString((string)e.NewValue);

    ReplyDelete

Post a Comment

Popular posts from this blog

Binding Enum with DescriptionAttribute in WPF

Binding an enumeration to a ComboBox can be done in several ways. In most cases you don't want to display the value itself, but a more user friendly description. One common approach is to use the DescriptionAttribute on the Enum values to supply a description for each value.  This is all possible in a very MVVM friendly way. First step is to add the  DescriptionAttribute  to the values of the enumeration. public enum MyValues { [Description("First value")] First, [Description("Second value")] Second } To retrieve the description from the enum we use a simple extension method. This method returns the value of the DescriptionAttribute if it exists, otherwise the string representation of the enum value is returned. public static string GetDescription(this Enum value) { var fieldInfo = value.GetType().GetField(value.ToString()); var attribute = fieldInfo.GetCustomAttributes(typeof(DescriptionAttribute), false).FirstOrDefault() as

Google+ finally for everyone!

There have been a lot of whining on Google from their Apps-users since the launch of  Google+  for everyone with a regular Google-account. The Apps-users have not been able to use  Google+ , until now! (actually  october 27 ) As usual I am impressed with most of the things Google accomplishes, but now when all of their services have gotten a visual and functional touchup I am getting really impressed. As someone at an early stage pointed out it is really sweet of Google to play naive and let me fill in my profile information when I create my profile (as if Google did not already know), but after a few clicks I am on the go. My albums from Picasa is automatically integrated and even the pictures I have uploaded to this blog is shown in  Google+ . But what happens next? Practically no one of my friends are on  Google+  so what do I use it for? I guess we will see. Hopefully there will be even more integration between the social networks in the future. I am anyhow very satified with