WPF WebBrowser control – part 2

Registering .NET handlers to DOM elements’ events

With an approach similar to the previous one (see part 1), we can register callbacks that get executed when a DOM event is triggered. Simply put: we can execute .NET code in response, for example, to a click on a HTML input text element. To do this you need to add the MSHTML library to the project references, like I showed in part 1.

As before, let’s assume that we have a simple UserControl that uses a WebBrowser:

<UserControl x:Class="WebBrowserExample.WebBrowserAdapter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <WebBrowser x:Name="WebBrowserControl"></WebBrowser>
    </Grid>
</UserControl>

and we add our UserControl to the main window, just like this:

<Window x:Class="WebBrowserExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:cont="clr-namespace:WebBrowserExample">
    <Grid>
        <cont:WebBrowserAdapter></cont:WebBrowserAdapter>
    </Grid>
</Window>

We can now use types and classes from mshtlm to directly access the DOM of a HTML page. The following snippet reports the complete code of the WebBrowserAdapter class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using mshtml;

namespace WebBrowserExample
{
    /// <summary>
    /// Interaction logic for WebBrowserAdapter.xaml
    /// </summary>
    public partial class WebBrowserAdapter : UserControl
    {
        public WebBrowserAdapter()
        {
            InitializeComponent();
            this.Loaded += WebBrowserAdapter_Loaded;
        }

        void WebBrowserAdapter_Loaded(object sender, RoutedEventArgs e)
        {
            WebBrowserControl.LoadCompleted += WebBrowserControl_LoadCompleted;
            WebBrowserControl.Navigate("http://www.google.com");
        }

        void WebBrowserControl_LoadCompleted(object sender, NavigationEventArgs e)
        {
            HookHTMLElements();
        }

        private void HookHTMLElements()
        {
            var document = WebBrowserControl.Document as HTMLDocument;
            var inputElements = document.getElementsByTagName("input");
            foreach (var item in inputElements)
            {
                DispHTMLInputElement inputElement = item as DispHTMLInputElement;
                if (inputElement.type == "text" 
                    || inputElement.type == "password" 
                    || inputElement.type == "search")
                {
                    HTMLButtonElementEvents_Event htmlButtonEvent = inputElement as HTMLButtonElementEvents_Event;
                    htmlButtonEvent.onclick += FocusCallback;
                }
            }
        }

        public bool FocusCallback()
        {
            Console.WriteLine("Callback method executed!");
            return true;
        }
    }
}

In the constructor, WebBrowserAdapter registers itself as a listener to its Loaded event. This event is fired when the user control is rendered and ready for interaction. In the WebBrowserAdapter_Loaded it begins to prepare the WebBrowser control: first, it subscribes to the LoadCompleted event of the WebBrowser: the WebBrowser fires this event whenever a navigation successfully ends. Then it makes the WebBrowser navigate to the Google home page, calling the Navigate method.

When the WebBrowserControl_LoadCompleted method gets executed, we can be sure that the WebBrowser holds a valid HTML document and we can safely call its Document property and manipulate the object return. This is what we do in the HookHTMLElements method: here we go retrieve all the elements that have tag name equal to “input”, much like we would do in a Javascript function (in fact, if you take a look at the methods the intellisense proposes you, you will see that they match the Javascript APIs), and we attach .NET callbacks to the DOM events. Now, if you click on the input text box of the Google home page, the FocusCallback method is called and a line is written on the standard output (see pictures below).