Using Microsoft Edge WebView2 in a DetailPaneTab

By Sajith Subramanian

Previously, in order to have a Chromium based browser control, you probably would have used CefSharp. Now there is an alternative which is also Chromium based, i.e. the WebView2.

One of the quicker and easier ways to test this, would be using the HelloWorld sample that comes along with the Vault SDK.

The first step in our HelloWorld sample would be to add the WebView2 SDK. To do so, navigate to Tools –> NuGet Package Manager –> Manage NuGet Packages for Solution, and install the WebView2 as shown below.

Next, open the UserControl file as Designer and add the WebView2 control as shown below:

For a complete step by step guide on using WebView2 with Windows forms, do take a look at the below article:

https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/winforms

Now, in our Command Extension class, i.e. the HelloWorldCommandExtension.cs in the HelloWorld sample, add the below lines of code in the DetailTabs() function.

public IEnumerable<DetailPaneTab> DetailTabs()
   {
     // Create a DetailPaneTab list to return from method
     List<DetailPaneTab> fileTabs = new List<DetailPaneTab>();
      // Create Selection Info tab for Files
       DetailPaneTab filePropertyTab = new DetailPaneTab("File.Tab.browsertab",
                                                   "Browser Tab",
                                                   SelectionTypeId.File,
                                                   typeof(BrowserControl)); //type of our UserControl
   //The propertyTab_SelectionChanged is called whenever our tab is active and the selection    
     //changes in the main grid 

    filePropertyTab.SelectionChanged += propertyTab_SelectionChanged;
    fileTabs.Add(filePropertyTab);

Next add the below code in the Selection Changed event of our custom tab.

void propertyTab_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            try
            {
                // The event args has our custom tab object.  We need to cast it to our type.
                BrowserControl tabControl = e.Context.UserControl as BrowserControl;
            }
            catch (Exception ex)
            {
              // If something goes wrong, we don't want the exception to bubble up to Vault Explorer.
                MessageBox.Show("Error: " + ex.Message);
            }
        }

Lastly, to get this up and running, you would need the WebView2 runtime. You can download it here.

You should now have the browser control show up in your custom tab!