VB .NET WebView2 WinForms tips

VB .NET WebView2 WinForms Tips

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
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
VS2017-Microsoft-Edge-WebBrowser-dll
Microsoft Edge WebView2 Reference Files
  • Open your Tool Box and Add : TextBox, Button and WebView2 Control on the Form like this
VS2017-WebView2
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
VS2017-WebView2-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
VS2017-Setup-Project-WebView2
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
VS2017-Creating-Setup-Project-for-WebView2
Setup project Debug folder
  • Now, your Setup folder should look something like that
Setup-files-in-Win10-64bit-for-WebView2-Project
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
WebView2-we-could-not-create-the-data-directory
we could not create the data directory

WebView2-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



Win10-WebView2-Solution-Runtime-Redist
Successfully created a WinForms setup project with WebView2

Popular posts from this blog

VB .NET Google Drive Api Source Code Example

VB .NET DropBox Api Source Code Example

Visual Basic Online Courses DataGridView Add Edit Delete

Visual Basic Online Course DevExpress 12.2.4 full for Visual Studio 2010

Visual Basic 2010 Working With DataBase Full Project Example