1. C# Winforms Webview2 Example
2. The Instance Of Corewebview2 Is Uninitialized
3. Webview2 C# Winforms
4. Windows Form Webview
5. Webview2 For Winforms

• WebView2 can power a wide spectrum of apps and use cases. For example, we’re working closely with the Office team to bring a WebView2-powered Add-ins experience to future versions of apps like Excel, which will allow add-ins to leverage the full-fidelity Chromium engine that powers Microsoft Edge.
• The WebView2 control enables you to embed web technologies (HTML, CSS, and JavaScript) in your native applications powered by Microsoft Edge (Chromium).
• #r 'nuget: MtrDev.WebView2.WinForms, 0.9.430.4' #r directive can be used in F# Interactive, C# scripting and.NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.

PowerShell, Winforms and WebView 2, the getting started app - EdgeChromium.ps1.

WebView2-WinForms

V 10.664.37
The Filenames has changed.
Now the DLL has not the V. Part.
net472 ⇒ Diga.WebView2.WinForms.dll
core3.1 ⇒ Diga.WebView2.WinForms.Core.dll

If you use net Framework. You have to modify the Diga.WebView2.Interop.dll Reference.
set Embed Interop Types to False

V 10.664.37
The Filenames has changed.
Now the DLL has not the V. Part.
net472 ⇒ Diga.WebView2.WinForms.dll
core3.1 ⇒ Diga.WebView2.WinForms.Core.dll

If you use net Framework. You have to modify the Diga.WebView2.Interop.dll Reference.
set Embed Interop Types to False

Release Notes

WebView2-WinForms

Dependencies

• .NETCoreApp 3.1

  • Diga.WebView2.Interop(>= 7.0.1)
  • Diga.WebView2.Wrapper(>= 7.0.1)
  • MimeTypeExtension(>= 1.0.22.1)

• .NETFramework 4.7.2

  • Diga.WebView2.Interop(>= 7.0.1)
  • Diga.WebView2.Wrapper(>= 7.0.1)
  • MimeTypeExtension(>= 1.0.22.1)

Used By

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Times have changed and Microsoft is not the same: Edge, the new Microsoft browser has been remodeled and now it’s using the Chromium engine, an open source browser engine developed by Google.

With that, it has also changed the way you can develop browser apps – you will be able to use the same browser engine Microsoft uses in its browser to develop your browser apps. In order to do that, you will have to use the new WebView control. The new WebView control is not tied to a specific Windows version or development platform: You can use it in any Windows version, from 7 to 10 or use it in a Win32, .NET (core or full framework) or UWP app.

This article will show how to use it and interact with it in a WPF app. We will develop a program that will search in the Microsoft docs site, so you will be able to easily search there for information. Download safari 11 for mac.

Introduction

Using the new WebView2 control in a .NET app is very simple, it’s just a matter of adding a NuGet package and you’re already setup. In Visual Studio, create a new WPF app. Right click the dependencies node in the Solution Explorer and select “Manage NuGet Packages” , the select the Microsoft.Web.WebView2 package. Then, in MainWindow.xaml, add the main UI:

You will have to add the wpf namespace to the xaml:

As you can see, we are adding a textbox for the text to search and a button to activate the search. In the WebView control, we left the Source property blank, as we don’t want to go to a specific site. If we wanted to start with some page, we would have to fill this property. For example, if you fill the Source property with https://docs.microsoft.com you would have something like this:

Navigating with the WebView

As you can see, it’s very easy to add a browser to your app, but we want to add more than a simple browsing experience. We want to make our app a custom way of browsing. To do that, we will use the following button click event handler:

We’ll take the text the user will want to search, create an URL for searching in the Microsoft docs website and then navigate to it. Once we do that, we can search the docs, just by typing the wanted text and clicking the button:

We can also add back and forward navigation by adding these two buttons:

The click event handler that will allow the browser to navigate to the previous or next page in history is:

Once you have this code in place, you are able to use the two buttons to navigate in the browser history.

Customizing the page

One thing that bothers me in this app is the fact that we have several items in the page that don’t belong to our search: the top bar, the footer bar, the search box, and so on. Wouldn’t it be nice to clean these items from the page when we are showing it? Well, there is a way to do that, but we’ll have to resort to JavaScript to do that: when the page is loaded, we’ll inject a JavaScript script in the page that will remove the parts we don’t want. For that, we must create this code:

We have two parts in this code: initially, we ensure that the CoreWebView2 component is created and then we set a DomContentLoaded event handler, that will be called when the HTML content is loaded in the browser. In the event handler, we will inject the script and execute it with ExecuteScriptAsync. That is enough to remove the parts we don’t want from the page. The JavaScript code will retrieve the parts we want to hide and set their display style to none. This code is called from the constructor of the main window:

You can also see the console.log commands in the code. You can debug the JavaScript code when browsing by using the F12 key. The developer window will open in a separate window: Zedge download for mac.

As you can see from the image, the top bar was removed, we now have a cleaner page. You can use the same technique to remove the context menu or add other functionality to the browser. Now we will get some extra info from the page.

C# Winforms Webview2 Example

Communicating between the app and the browser

When we are browsing the results page, we can get something from it. We can copy the results to the clipboard, so we can use them later. To do that we must use the communication between the app and the WebView. This is done by a messaging process. The app can send a message to the WebView, using something like

The WebView will receive the message and can process it by adding an event listener like in

When we want to send messages in the other direction, from the WebView to the app, we can send it from JavaScript, using

It will be received by the app with an event handler like

The Instance Of Corewebview2 Is Uninitialized

That way, we can have full communication between the app and the WebView and we can add the functionality we want: copy the results from the results page to the clipboard. The first step is to add the button to copy the results in MainWindow.xaml:

The click event handler will send a message to the WebView:

We must inject some code in the web page to receive and process the message, this is done by using the AddScriptToExecuteOnDocumentCreatedAsync method to inject the code when the page is loaded, in the InitializeAsync method:

Webview2 C# Winforms

The JavaScript code will add the event listener, that will get all results in the page using the querySelectorAll method, and then it will map it to an array of objects that have the title and link of the result, then will send this array to the app with postMessage. In the case that there are no results in the page, an alert message is shown. The code also sets the event handler for the WebMessageReceived event:

The handler will get the sent data with the args.WebMessageAsJson, then it will send it to the clipboard as text, where it can be copied to any program. Now, when you run the program, do a search and click the Copy button, you will have something like this in the clipboard:

Now we have an app that can browse to a page and interact with it.

Windows Form Webview

Conclusion

Webview2 For Winforms

There are many uses to this feature and the new Chromium WebView is a welcome addition to our toolbox, we can interact with the web page, retrieving and sending data to it.

The full source code for this article is at https://github.com/bsonnino/WebViewWpf