As you have surely heard, Internet Explorer will stopped being supported in August 2021. That means that you should really stop using it as it will not be patched anymore and wide open to problems.

Back in April 2007, I wrote an article about integrating the WebBrowser control in your application. This control is using Internet Explorer as its engine. This means that a replacement needs to be found.

Luckily, Microsoft just released a preview control which is based on the latest Edge-Chromium and we can use this control in a .Net application. This control is called the WebView2 (because there was a former WebView control that could not be used from .Net).

Why would one need such a control in a desktop application? I hope that nobody is thinking about creating a new web browser today! Maybe you have some webpage that you would like to display? Or maybe a PDF? This control is extremely useful even in a desktop application.

Requirements

To use this new control, you will need:

• Windows 7 or above (which you should not use anymore anyway!)
• Visual Studio 2017 or better
• Targeting at least the .Net Framework 4.6.2
• Edge Chromium preview version from the Canary channel installed (including on computers where your application is running)

Available source code

Both VB and C# projects are provided this month.

The solution was created using Visual Studio 2019 but should also work in earlier versions (as long as you are using at least what is listed in the requirements section).

Figure 1: The demo application in action

Remember that the code here is based on a prerelease version of the control. That means that the code can change when the final version will be made available.

Adding the control to your toolbox

As most of the new stuff from Microsoft, this control is provided through NuGet for easy deployment and updates.

One thing that took me a while to understand is that, as of today, to be able to use the control from a .Net application, we need to use the “pre-release” version. Be sure that you have that options selected when you search for the WebView2 control.

Figure 2: Adding the control to your solution

The only hint I had was under the Description section: This package is necessary for Win 32 C/C++, WPF, and WinForms applications. At the time of writing, the non-pre-release version of the same version is only available for Win32 C/C++ (not for WPF and WinForms).

You should keep an eye on the release notes page for that control. Microsoft updates the controls every 6 weeks.

You are not supposed to deploy to production any applications relying on a prerelease version of this control.

As per the roadmap for this control, the general availability for this control should be Q4 2020 (but don’t quote me on that) but instead visit the roadmap page.

Navigate to a web site or a PDF document

This is probably the feature that you will use the most. You can either set the Source property of the control or use the Navigate method which is hidden in the CoreWebView2 of the control object.

But I found out during testing that the control seems to take some time to initialize. For example, I was trying to load a page on the Shown event of the form but that was sometime throwing me an exception. You should always check if the control is ready before trying to play with it.

Also, you need to ensure that a complete URL is provided. An UriFormatException is thrown if the URL does not start with either http:// or https://.

So, what could be a single line of code could easily end up begin something like 20 lines! Here is a sample of the code required to navigate to a website (or display a PDF):

Private Sub btnGo_Click(sender As Object, e As EventArgs) Handles btnGo.Click
    If webView21?.CoreWebView2 Is Nothing Then
        MessageBox.Show("The WebView2 control does not seem to be ready. Retry in a few seconds.")
    Else
        Try
            'webView21.CoreWebView2.Navigate(textBox1.Text)
            webView21.Source = New Uri(textBox1.Text)
        Catch ex As UriFormatException
            MessageBox.Show("It looks like your URL is malformed. It must begin with HTTP[S]://")
        Catch ex As Exception
            MessageBox.Show($"Another exception happened: {ex}")
        End Try
    End If
End Sub

private void BtnGo_Click(object sender, EventArgs e)
{
    if (webView21?.CoreWebView2 == null)
    {
        MessageBox.Show("The WebView2 control does not seem to be ready. Retry in a few seconds.");
    }
    else
    {
        try
        {
            //webView21.CoreWebView2.Navigate(textBox1.Text);
            webView21.Source = new Uri(textBox1.Text);
        }
        catch (UriFormatException)
        {
            MessageBox.Show("It looks like your URL is malformed. It must begin with HTTP[S]://");
        }
        catch (Exception exception)
        {
            MessageBox.Show($"Another exception happened: {exception}");
        }
    }
}

An example of a web page rendered in the control is shown in figure 1.

Displaying HTML content

Another useful way of using the WebView2 control is to display HTML content that you can build dynamically in your application or stored somewhere like a database or a file.

It is easy to display HTML content in the control. You just need to use the NavigateToString method of the control as shown here:

Private Sub btnHtml_Click(sender As Object, e As EventArgs) Handles btnHtml.Click
    If webView21?.CoreWebView2 Is Nothing Then
        MessageBox.Show("The WebView2 control does not seem to be ready. Retry in a few seconds.")
    Else
        Dim strHtml As String = "<h1>:Hello World!!!</h1><h2>Enjoy this new control</h2>"
        webView21.NavigateToString(strHtml)
    End If
End Sub

private void BtnHtml_Click(object sender, EventArgs e)
{
    if (webView21?.CoreWebView2 == null)
    {
        MessageBox.Show("The WebView2 control does not seem to be ready. Retry in a few seconds.");
    }
    else
    {
        string strHtml = "<h1>:Hello World!!!</h1><h2>Enjoy this new control</h2>";
        webView21.NavigateToString(strHtml);
    }
}

The same comment about ensuring that the control is fully initialized also applies here.

Figure 3: Displaying dynamically generated HTML content

Injecting script

Apparently, some features are not yet built (and may never been implemented!). One example is that there is no Print method. It is available to users when they right-click on the control but not as a method for you. But that feature can be easily implemented using a single line of code:

webView21.CoreWebView2.ExecuteScriptAsync("window.print();")

And we have access to mostly the full Edge Chromium

It is not just a viewer that you have here. You get most of the features of Edge Chromium.

For example, it you load a PDF into the control, you will be able to draw on the document, to highlight sections of text, save the document, print, …that might open your eyes to features in your application that you thought impossible.

Figure 4: Drawing on a PDF document

If you want to know what you can do programmatically with this control, visit the members page.

Conclusion

Because it is still a control in prerelease, I did not want to go to far as many things can change in the next few weeks/months. But at least you get the idea of how you can benefit from this control.

Even desktop applications can benefit from web components. Now that we need to move away from Internet Explorer and all its remnants, the WebView2 is a great welcome into our toolbox.