Create a button that launches a non-IE browser

Question

I'm implementing a VSTO add-in with WebView2. I would like to make a button clicking on which launches a non-IE browser hosting a webpage.

Here is UserControl1.cs:

using Microsoft.Web.WebView2.Core;
using System;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
using System.Diagnostics;

namespace My_Addin
{
    public partial class BrowserUserControl : UserControl
    {
        private WebView2 webView;

        public BrowserUserControl()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private void WebView_NavigationStarting(object sender, CoreWebView2NavigationStartingEventArgs e)
        {
            Debug.WriteLine("inside WebView_NavigationStarting");
            // Handle navigation starting if necessary
        }

        private async void InitializeAsync()
        {
            try
            {
                var env = await CoreWebView2Environment.CreateAsync(userDataFolder: @"C:\Users\softtimur\VSTO");
                Debug.WriteLine("inside InitializeAsync 1");

                webView = new WebView2
                {
                    Dock = DockStyle.Fill,
                };

                Controls.Add(webView);

                await webView.EnsureCoreWebView2Async(env);
                Debug.WriteLine("inside InitializeAsync 2");

                webView.NavigationStarting += WebView_NavigationStarting;
                Debug.WriteLine("inside InitializeAsync 3");
                webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;
                Debug.WriteLine("inside InitializeAsync 4");
            }
            catch (Exception ex)
            {
                Debug.WriteLine($"Initialization failed with exception: {ex}");
            }
        }

        private void WebView_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            Debug.WriteLine("inside WebView_CoreWebView2InitializationCompleted 1");
            if (e.IsSuccess)
            {
                Debug.WriteLine("inside WebView_CoreWebView2InitializationCompleted 2");
                webView.CoreWebView2.Navigate("https://www.google.fr");
            }
            else
            {
                MessageBox.Show($"WebView2 wasn't initialized successfully. Error: {e.InitializationException}");
            }
        }
    }

}

And the button:

private void button2_Click(object sender, RibbonControlEventArgs e)
{    
    using (var form = new Form())
    {
        form.Controls.Add(new BrowserUserControl { Dock = DockStyle.Fill });
        form.ShowDialog();
    }
}

Clicking on the button does launch a window, but it's a blank page. Inspecting the page does not give useful information.

In the output console, it shows inside InitializeAsync but not inside WebView_CoreWebView2InitializationCompleted. Under C:\Users\softtimur\VSTO, there is indeed a folder EBWebView created.

Does anyone know what's the right way to make such a button?

Answer 1

The WebView2 control provides two ways to handle asynchronous initialization of the WebView2's CoreWebView2 instance. The WebView2.EnsureCoreWebView2Async method gives you more control over initialization parameters but is hard to use with a XAML declarative style WebView2 control. If you declare your WebView2 control in XAML then you can use the WebView2.CoreWebView2InitializationCompleted event which will be raised once initialization completes (successfully or with failure - check the event args).

It is possible to use both the EnsureCoreWebView2Async method and the CoreWebView2InitializationCompleted event but you must subscribe to the event before calling the method. Once the method completes, initialization has already happened. If you subscribe to the event after that, the event won't be raised because initialization is complete.

                var env = await CoreWebView2Environment.CreateAsync(userDataFolder: @"C:\Users\softtimur\VSTO");
                Debug.WriteLine("inside InitializeAsync 1");

                webView = new WebView2
                {
                    Dock = DockStyle.Fill,
                };

                Controls.Add(webView);

                // Must subscribe before calling EnsureCoreWebView2Async
                webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted; 
                await webView.EnsureCoreWebView2Async(env);
                Debug.WriteLine("inside InitializeAsync 2");

                webView.NavigationStarting += WebView_NavigationStarting;
                Debug.WriteLine("inside InitializeAsync 3");
                // Too late
                // webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted; 
                Debug.WriteLine("inside InitializeAsync 4");

Answer 2

You are trying initialize the webview2 instance in the form's constructor. That is too early I suppose. Try to choose any other event for that, for example, the Load one.

public BrowserUserControl()
{
   InitializeComponent();
   Load += BrowserUserControl_Load;
}

private async void BrowserUserControl_Load(object sender, EventArgs e)
{
   await InitializeAsync();
}