The recent PowerShell Studio service builds include some changes to improve the handling of the WebView2 control. This article details the changes made and provides an overview of loading the control in PowerShell Studio’s designer.
Setup
To load the WebView2 control in PowerShell Studio’s designer, you will need to add references to the WebView2 assemblies. To get these assemblies, you can open a PowerShell command shell running as administrator, then run the following command to install the WebView2 NuGet package:
| Install-Package Microsoft.Web.WebView2 |
This command is from the PackageManagement module using NuGet as a provider. NuGet may need to be updated on your machine for this command to work.
After the package is installed, locate the following DLL files under the PackageManagement folder in Program Files:
- Microsoft.Web.WebView2.Core.dll
- Microsoft.Web.WebView2.Winforms.dll
- WebView2Loader.dll
The first two assemblies are located under the lib folder. For Windows PowerShell, your assemblies will be in the net45 folder. For PowerShell 7, the assemblies will be in the netcoreapp3.0 folder. The WebView2Loader.dll is located under the runtimes folder.
It is important to note that these assemblies are not interchangeable between Windows PowerShell and PowerShell 7. The assemblies in the net45 folder can only be referenced in Windows PowerShell, and the assemblies in the netcoreapp3.0 folder can only be referenced in PowerShell 7. Attempting to load one in the other will result in errors, and the control will fail to load when the form runs.
You should copy these assemblies to the same folder or subfolder as your script, but only Microsoft.Web.WebView2.Core.dll and Microsoft.Web.WebView2.Winforms.dll need to be directly referenced from your script. When the assemblies are placed in the same folder or subfolder, the path saved in the PSF file will be relative to the file. If not, it will be saved as an absolute path.
Assemblies Dialog
The Assemblies dialog can now be accessed when the designer tab is selected. To add references to these assemblies in your PSF file, you can add them manually or add them from the ribbon (Home->Edit):
In the Assemblies dialog, select add from the right-hand side:
From the Add Assembly dialog, select browse and then locate your assemblies:
After adding the assemblies, the WebView2 control will appear in the ToolBox pane:
You should now be able to use the control in the designer.
New Helper Function
Now, when the control is added to a form, a function is added in the Script tab of the PSF file named Initialize-WebView2Control.
function Initialize-WebView2Control
{
<#
.SYNOPSIS
Setup for the WebView2 control.
.DESCRIPTION
Initializes the CreationProperties for the WebView2 control and sets the location for the WebView2 control.
.PARAMETER WebViewControl
The Webview2 control you want to initialize.
.PARAMETER UserDataFolder
The location you want the web data saved for the WebView2 control. If none is specified then it will default to the current script location.
.EXAMPLE
PS C:\> Initialize-WebView2Control -control $value1
PS C:\> Initialize-WebView2Control -control $value1 -dataFolderName "C:\UserData"
#>
param
(
[Parameter(Mandatory = $true)]
[Microsoft.Web.WebView2.WinForms.WebView2]
$WebViewControl,
[string]
$UserDataFolder
)
$WebViewControl.CreationProperties = [Microsoft.Web.WebView2.WinForms.CoreWebView2CreationProperties]::new()
if ([string]::IsNullOrEmpty($UserDataFolder))
{
if ($null -ne $hostinvocation)
{
$UserDataFolder = Split-Path $hostinvocation.MyCommand.path
}
else
{
$UserDataFolder = Split-Path $script:MyInvocation.MyCommand.Path
}
}
if (!(Test-Path $UserDataFolder))
{
New-Item -ItemType Directory -Path $UserDataFolder
}
$WebViewControl.CreationProperties.UserDataFolder = $UserDataFolder
}To use the function, you need to pass a WebView2 control. This will initialize the CreationProperties property so the UserDataFolder can be set. A data folder not specified in the function call will default to the current folder.
This function can be called in the form load event handler:
$form1_Load={
Initialize-WebView2Control -WebViewControl $webview21
}It is important to note that in service build 5.8.239, the WebView2 template has been removed as it no longer worked as expected with the changes made to loading the WebView2 control.
Error When Loading the Control and Fixes
When assemblies cannot be loaded, the application will now prompt you to locate the assemblies. If the assemblies are not loaded, this may result in data loss for the control in your PSF file.
A warning will be written to the Output pane for one or both of the assemblies:
Prompts to locate the missing assemblies will follow this output. The prompts will look like the following:
It is important to verify that the control is still present in the designer tab after locating the assemblies. After verifying, make sure to save the PSF file; this will ensure that the new file path information is saved.
If this process goes wrong and you do not see the control present in your existing PSF file, do not save, as this could result in data loss of the WebView2 control. Close the file to attempt the process again.
Older PSF files created before service build 5.8.239 may need their references added again. This is due to a bug that affected the path information of assemblies saved to the PSF file. It does not affect every file.
Feedback
All information provided in this article is based on the functionality available in PowerShell Studio 2024 build 5.8.241.
As always, any feedback is appreciated. If you have a particular type of blog article or product feature request you would like to see, please submit your suggestions on the Wish List and Feature Requests forum or the Feature Requests page.
