VB .NET WebView2 WinForms tips

July 22, 2021

VB .NET WebView2 WinForms Tips

Edge WebView2 Tips

Edge WebView2 Intro

This course blog discusses dealing with Microsoft Edge WebView2 Control. If you are a developer then I'm sure you have searched before for an alternative WebBrowser Control, especially if you are a Desktop Apps Developer. Edge WebView2 Control by Microsoft gives you the ability to Embed Web Technologies like (HTML, CSS, JavaScript, …, etc.) in your App. It uses rendering engine Microsoft Edge (Chromium), so you can Display the web contents in your Apps.

Requirements

In order to start Microsoft Edge WebView2 for Desktop Projects as alternative for WebBrowser Control, you need the following :

Microsoft Windows (In my case, it is Win10 64bit)
Microsoft Visual Studio (In my case, it is VS2017)
WebView2 Runtime or any Microsoft Edge (Chromium) non-stable channel installed on supported OS (currently Windows 10, Windows 8.1, and Windows 7). (In my case, Win10 64bit and Microsoft Edge (Chromium) non-stable channel)
You can read further more about WebView2 Prerequisites here.

► Note ◄

The WebView team recommends using the Canary channel and the minimum required version is 82.0.488.0.

WebView2 in Visual Basic 2017

Assuming you downloaded and installed the previous Files 'Microsoft Edge Canary Channel'.

Now open Visual Studio 2017 and Create new WinForm Project and Save it any place accessible to you .
Choose .NET Framework 4.6.1 'it suits me, that is all' you can pick yours as long as it is compatible with WebView2 version.

VS2017 WebView2 WinForms Project

From Package Manager Console - get the WebView2 Package into your Project
Here is the link of the WebView2 Version 1.0.864.35 that I'm using in my example from NuGet
After you successfully get WebView2 into your project you should now see Reference in your Solution Explorer like this

Microsoft Edge WebView2 Reference Files

Open your Tool Box and Add : TextBox, Button and WebView2 Control on the Form like this

WebView2 WinForms Project

I renamed my WebView32 Control to WebViewTest
The Code in Form1.vb is :


    
      Public Class Form1
      Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
      If (Not IsNothing(WebViewTest) AndAlso _
      Not (WebViewTest.CoreWebView2) Is Nothing) Then
      WebViewTest.CoreWebView2.Navigate("https://" & TextBox1.Text)
      End If
      End Sub
      Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
       With WebViewTest
      .Source = New Uri("about:blank")
      End With
      End Sub
      End Class

Live Test

Running the project successfully

Creating a Setup Project for WebView2

Now, we will create a Setup Project (Deployment) for our little VS2017 WinForms Project, so just Build your Project as [Target CPU : x86]

From File, New Project, pick Setup Project
Add Primary Output from [your project], then all the dependencies will be listed automatically

Creating a Setup Project for WebView2

Build your Setup Project, and install it using Administrative Privileges'
Now, you should have those files in your Setup Project Directory

Setup project Debug folder

Now, your Setup folder should look something like that

Setup files in Win10 64bit for WebView2 Project

Now, let's test our Application
Starting the application As Administrator, won't even do anything, it acts as if no WebView2 Control is placed on the Form1.
In order to solve this problem, you will have to go back to your VS2017 Project Folder [bin\Debug\runtimes\win-x86\native]
Copy the DLL File [WebView2Loader.dll] to your Setup Project Folder or, you will get and error message : Initializing Error:System.DllNotFoundException: Unable to load DLL 'WebView2Loader.dll': The specified module could not be found. (Exception from HRESULT: 0x8007007E)
You may also get the error : we could not create the data directory, in order to solve this issue, you have to grant permissions from the Setup Folder in drive C:\, and from its properties [Remove the Read Only flag] like this

we could not create the data directory

WebView2 we could not create the data directory

microsoft-Edge-WebView2-runtime-Error-Setup-project

Make sure the setup folder can read/write

Now, make sure to grant all of previous list the privileges' and click OK, and restart you application as Administrator again
You should now notice that a folder was created in your Setup folder called [\Project_Name.exe.WebView2]
Now, the application is running successfully.

Another solution is to explicitly specify a USER DATA FOLDER and manage it and consider deleting it when your application is uninstalled.
Read : WebView2 Documentations on Manage the user data folder
In order to manage User Data Folder in ur Project Programmatically, use this code


    
      Public Sub New()
      Dim ThisUrl As String = Nothing
      InitializeComponent()
      InitializeWebView2(ThisUrl)
      End Sub
      Private Async Sub InitializeWebView2(Optional TUrl As String = Nothing)

       Dim UsrDataFoldr = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData) & "\SoftwareName"

      Dim env = Await CoreWebView2Environment.CreateAsync(Nothing, UsrDataFoldr)

      Await WebView2.EnsureCoreWebView2Async(env)

      WebView21.Source = New Uri("https://www.google.com/")

      End Sub

Successfully created a WinForms setup project with WebView2

Here are some Online Visual Basic Lessons and Tips :

Search This Blog

Visual Basic Online Course

VB .NET WebView2 WinForms tips

VB .NET WebView2 WinForms Tips

Popular posts from this blog

Visual Basic Online Courses DataGridView Add Edit Delete

Visual Basic 2010 Working With DataBase Full Project Example

VB NET Check internet connection

Visual Basic .Net - Button Sound / Music Play

Visual Basic 2010 Math Functions