Using WebView2 inside WinUI 3 in Desktop project (Part 3)

In Part 2 we added Stop, Reload, Go Back, Go Forward and Inspect possibilities to our WebView 2 project. Now let's cover how to deal with context menu, default dialogs and new windows.

By default, we have got the following context menu for WebView 2 control:

If you want to hide this default context menu, the following piece of code will be helpful:

// add in MainWindow constructor for demo purposes
webView.CoreWebView2Initialized += WebView_CoreWebView2Initialized;

private void WebView_CoreWebView2Initialized(WebView2 sender, CoreWebView2InitializedEventArgs args)
{
	webView.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
}

In similar way, you can hide standard alert and prompt dialogs and customize them on your own:

private void WebView_CoreWebView2Initialized(WebView2 sender, CoreWebView2InitializedEventArgs args)
{
	webView.CoreWebView2.Settings.AreDefaultScriptDialogsEnabled = false;
	webView.CoreWebView2.ScriptDialogOpening += CoreWebView2_ScriptDialogOpening;
}

private void CoreWebView2_ScriptDialogOpening(CoreWebView2 sender, CoreWebView2ScriptDialogOpeningEventArgs args)
{
	if (args.Kind == CoreWebView2ScriptDialogKind.Alert)
	{
		// this is an alert, would you like to display it?
	}

	// always press OK (not the best idea)
	args.Accept();
}

Now imagine, your web page requests to create a new window, for example with window.open() and you need to add some custom processing. This is how you can do it:

private void WebView_CoreWebView2Initialized(WebView2 sender, CoreWebView2InitializedEventArgs args)
{
	webView.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;
}

private void CoreWebView2_NewWindowRequested(CoreWebView2 sender, CoreWebView2NewWindowRequestedEventArgs args)
{
	args.Handled = true;
	webView.Source = new Uri(args.Uri);
}

We set here Handled property to true, telling our WebView 2 that it is not necessary to create new window any more. And then, just for demo purposes we redirect current web page to received URL.

Next time in Part 4 we will discuss how to work with JavaScript and how to receive messages from web page in C# code.

Using WebView2 inside WinUI 3 in Desktop project (Part 2)

In Part 1 we created WinUI 3 in Desktop sample project. Now we will add Stop, Reload, Go Back, Go Forward and Inspect possibilities.

To keep our sample simple, let's add just a bunch of buttons on the left side of the window:

Great, now let's just add button handlers, starting for Stop:

private void stopButton_Click(object sender, RoutedEventArgs e)
{
	webView.CoreWebView2.Stop();
}

Notice CoreWebView2 property, this underlying object exposes more properties and methods than WebView2 itself. So we will often need to use it. Before using it, you should check it is already initialized by calling EnsureCoreWebView2Async().

Now let's look how we can reload the web page:

private void reloadButton_Click(object sender, RoutedEventArgs e)
{
	webView.Reload();
}

If you press on a link, then you may need to return back to the previous page. This is how it can be done programmatically:

private void backButton_Click(object sender, RoutedEventArgs e)
{
	if (webView.CanGoBack)
	{
		webView.GoBack();
	}
}

After you've gone back, you may need to return forward:

private void forwardButton_Click(object sender, RoutedEventArgs e)
{
	if (webView.CanGoForward)
	{
		webView.GoForward();
	}
}

If you have some errors on your page or in your code, it may be very useful to open Dev Tools Chromium window:

private void inspectButton_Click(object sender, RoutedEventArgs e)
{
	webView.CoreWebView2.OpenDevToolsWindow();
}

This is how Inspect/Dev Tools window will look like:

In Part 3 we will discuss how you can remove context menu and default script dialogs from WebView2. Also we will talk about creating new windows.

Using WebView2 inside WinUI 3 in Desktop project (Part I)

Microsoft Edge WebView2 control allows you to use Chromium Engine in any type of apps (including WinForms, WPF, WinUI 3). In several articles we will describe how to use WebView2 control inside WinUI 3 in Desktop project which is the part of Microsoft Reunion.

To create this type of this project first you need to install Microsoft Reunion Extension:

Now we can create our WinUI 3 in Desktop project:

After creating the project make sure Application->Target Framework is set and also in case of Reunion version 0.5.6 you may need to add the following lines:

Now let's add WebView2 to MainWindow content.

Now we can navigate to whatever page we need in code using Source property and also we can add NavigationStarting and NavigationCompleted events.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Web.WebView2.Core;
using System;

public MainWindow()
{
    this.InitializeComponent();

	webView.Source = new Uri("https://microsoft.com");

	webView.NavigationStarting += WebView_NavigationStarting;
	webView.NavigationCompleted += WebView_NavigationCompleted;
}

First, NavigationStarting will be triggered:

private void WebView_NavigationStarting(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
{
            
}

And then, NavigationCompleted will be triggered:

private void WebView_NavigationCompleted(WebView2 sender, CoreWebView2NavigationCompletedEventArgs args)
{
	bool success = args.IsSuccess;
}

By now our sample is very simple:

In Part 2 we will describe how to stop navigation, reload the page, go back, go forward and also inspect the page.