WebView2コントロールを使う

WebView2コントロールとは

WebBrowserコントロールはInternetExplorer(Tridentエンジン)をベースとしている為、 最近のWebページを表示すると崩れたりJavaScriptがエラーになることがあります。
(また、WebBrowserのInternetExplorerバージョンはIE7になっていますので、IE11として表示するにはレジストリを書き換える必要があります)

WebView2コントロールはEdgeブラウザ(Chromium)をベースとしてますので、そういった問題が解消されます。

※WebView2は現時点ではプレビュー版(開発中)であり、動作が変わる可能性があります。
※WebView2とWebViewコントロールは別のものです。WebViewは古いバージョンのEdgeをベースとしています。

準備

必要環境

開発の為に必要な環境は以下になります。
・Windows10 1803(ビルド17110)以降
・Microsoft Edge (Chromium) カナリアチャネル ・VisualStudio 2017以降
・.NET Framework 4.6.2以降

パッケージ管理方法の変更

VisualStudio2017でNuGetを使う関係上、 パッケージ管理方法をpackages.configではなくPackageReferenceを使用する必要があります。
もし設定を変更していない場合、WebViewを使ってビルドすると以下のエラーがでました。
WebViewのビルドエラー

変更方法ですが、メニューの[ツール]->[NuGetパッケージマネージャー]->[パッケージマネージャー設定]を選択します。
NuGetパッケージマネージャー設定

「パッケージの管理」の「既定のパッケージ管理形式」を"PackageReference"に設定してください。
DLLの選択

ターゲットフレームワークの設定

ビルド時に使用する.NET Frameworkが4.6.2以降になっている必要があります。
プロジェクトのプロパティからアプリケーションを選択し、ターゲットフレームワークを確認してください。
ターゲットフレームワーク

もし4.6.2より古いフレームワークが選択されていた場合は変更します。
新しいバージョンがインストールされていない場合は選択できません。
フレームワークのダウンロード

その場合、「別のフレームワークをインストールします」をクリックし、表示されるサイトからダウンロード&インストールします。 フレームワークのダウンロード

「Developer Pack」のリンクをクリックするとインストーラーがダウンロードされます。
インストールすればVisualStudioから選択できるようになります。
フレームワークの選択


WebView2 SDKのインストール

NuGetから「WebView2」のSDKをインストールします。

メニューの[ツール]->[NuGetパッケージマネージャー]->[ソリューションのNuGetパッケージの管理]を選択します。
NuGetパッケージの管理

検索欄に「WebView2」を入力し、「プレリリースを含める」にチェックします。
右側で適用するプロジェクトを選択してインストールします。
※ここでプレリリースバージョンをインストールしないと、ツールボックスにWebView2が表示されません。
Microsoft.Toolkit.Forms.UI.Controls.WebView

VisualStudioの再起動後、ツールボックスにWebView2が現れました。
ツールボックス

フォームに張り付けてコードをかき、アプリを実行するとこのように表示されます。 DLLの選択

実行時にエラーが発生する場合

画面にWebView2コントロールを貼り付けて実行するとDesigner.csの「this.Controls.Add(this.webView2);」で以下のExceptionが発生する場合。

						System.NullReferenceException: 'オブジェクト参照がオブジェクト インスタンスに設定されていません。'
					
						System.NullReferenceException
						  HResult=0x80004003
						  Message=オブジェクト参照がオブジェクト インスタンスに設定されていません。
						  Source=Microsoft.Web.WebView2.WinForms
						  スタック トレース:
						   場所 Microsoft.Web.WebView2.WinForms.WebView2.OnVisibleChanged(EventArgs e)
						   場所 System.Windows.Forms.Control.AssignParent(Control value)
						   場所 System.Windows.Forms.Control.ControlCollection.Add(Control value)
						   場所 System.Windows.Forms.Form.ControlCollection.Add(Control value)
						   場所 WindowsFormsCS.Form3.InitializeComponent() 
				
Edgeのcanaryバージョンが入っていなかったり、バージョンが古かったりすると発生します。
こちらからダウンロードしてインストールします。
また、Edgeは64bitであれば、プロジェクトのプロパティで「32ビットを優先」は外して、64ビットアプリがビルドされるようにしてください。

参考