Diga.WebView2

WebView2 Wrapper For => Edge Chromium

Nuget Packages:

There are NUGET-PACKAGES

Diga.WebView2.Interop => NuGet
Diga.WebView2.Wrapper => NuGet
Diga.WebView2.WinForms => NuGet
Diga.WebView2.Wpf => NuGet
Diga.WebView2.Scripting => NuGet

Why this project was created.

Microsoft provides a WebControl for Windows forms. However, this is based on Internet Explorer. This cannot represent various features. This does not support WebAssemblies. The motivation for this project, however, was to load and display WebAssembly applications (BLAZOR-SITES). It should also be possible to work completely without an HTTP server.

packages are currently supported.

microsoft.web.webview2

Version 108.0.1462.46 is the current Version on Client - PC's

WebView2 Release-Notes

Why is the microsoft.web.webview2 package not linked in Package?

Native calls are made via a separate C++ DLL. The package from Microsoft is then also linked here. The native DLL links the WebView2LoaderStatic.lib. Therefore, a link to the Microsoft.Web.WebView2 package is no longer necessary in the package.

Package version:

This means the version of the WebView2 packages.

V10146237 => microsoft.web.webview2 1.0.1462.37

How were the interop sources created?

The Microsoft microsoft.web.webview2 package contains webview2.tlb. The basic file was created with tlbImp.exe. Because the resulting DLL does not correctly reflect interfaces, they need to be revised. Therefore, the DLL, with JetBrains-DotPeek, has been converted to sources and adjusted accordingly.

Why a separation between Interop, Wrapper and WinForms

The separation is maintained because the packages can be useful in different projects. So it may be that only the interop and wrapper packages are used in some projects. Or it may be that only the Interop package is needed.

Why I get an error when I try to add the core control in a WinForms application in the designer.

This seems to be related to Visual Studio.

Windows Forms

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

Set Embed Interop Types to False! This copies the DLL into the program directory. If you do not make this setting, there will be an error when starting the application.

WinForms is STAThread. The access to the component must therefore also be thread-safe, as is usual in WinForms. You should never call properties or functions of a component directly from a Task. Use a delegate to do this, if necessary.

public void SendMessage(string message)
{
   if (this.webView1.InvokeRequired)
   {
      Action<string> ac = SendMessage;
      this.webView1.Invoke(ac, message);
   }
   else
   {
      this.webView1.SendMessage(message);    
   }
}

public async Task InvokeSendMessage(string msg)
{
   await Task.Run(() => this.SendMessage(msg));
}

DOM Objects

The Windows Forms and WPF project now supports DOM objects. You can retrieve the DOM - Window object and the DOM - Document object directly by using the GetDOMWidow() and GetDOMDocument() functions. Events are only add sync functions!!

DOMElement button = this.WebView3.GetDOMDocument().getElementById("ga_button");
button.Click += (o, ev) =>
{
   MessageBox.Show("Test from Button");
};

The following code will throw an exception!!

DOMElement button = this.WebView3.GetDOMDocument().getElementById("ga_button");

// you cannot add async Eventhandler!!!
// this will Raise InvalidOperation!!
button.Click += async (o, ev) =>
{
   await this.WebView3.GetDOMWindow().alertAsync("TEST");
};

Asynchronous and synchronous calls should never be mixed. If possible, use the synchronous calls.

Correct example

    DOMDocument doc = this.webView1.GetDOMDocument();
    this._DIV = doc.createElement("div");
    this._DIV.id = Guid.NewGuid().ToString();
    doc.body.appendChild(this._DIV);
    //add a button element
    DOMElement element = doc.createElement("button");
    //set inner html of button 
    element.innerHTML = "Click Me";
    //set id of Button-Element
    element.id = Guid.NewGuid().ToString();

    //add Button to DIV
    this._DIV.appendChild(element);

    //Add EventHandler
    // Important never call synchron Properties and Functions in an async function
    element.Click += OnDomElementClick1;
    element.Click += OnDomElementClick;
    ...
    private void OnDomElementClick1(object sender, DOMMouseEventArgs e)
    {
      ...
    }
    private void OnDomElementClick(object sender, DOMMouseEventArgs e)
    {
      ...
    }

Note that as soon as a new document is created, the old variables become invalid. You can query the validity of the variable with VarExist().

Check validity of the object

//sync
if(!this._DIV.VarExist())
   this._DIV = nothing;
...
// async
bool varExist = await this._DIV.VarExistAsync();

Canvas

   //create Canvas
   DOMElement elem = this.WebView3.GetDOMDocument().createElement("canvas");
   this.WebView3.GetDOMDocument().body.appendChild(elem);

   DOMCanvasElement can = new DOMCanvasElement(elem);
   can.width = 200;
   can.height = 100;
   // Create Context
   var ctx = can.GetContext2D();
   //yellow rectangle
   ctx.fillStyle = "yellow";
   ctx.fillRect(0,0,255,255);
   //transform
   ctx.transform(1,(decimal)0.5, (decimal)-0.5,1,30,10);
   //blue rectangle
   ctx.fillStyle = "blue";
   ctx.fillRect(0,0,250,100);
   //reset Transform
   ctx.resetTransform();
   //draw line
   ctx.moveTo(0, 0);
   ctx.lineTo(200,100);
   ctx.stroke();

AOT Native compilation

Diga.WebView2.Wrapper currently does not support AOT Native compilation.

But we are currently working on it. So that AOT compatible solutions, like CoreWindowsWrapper, can use the Diga.WebView2.Wrapper component.

ITAgnesmeyer/Diga.WebView2