WebView2コントロールを使う

WebView2コントロールとは

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

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

準備

必要環境

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

WebView2ランタイムのインストール

マイクロソフトのHP では、前提条件として WebView2ランタイム または Edge(Canaryチャネル) のインストールが必要になっています。
ここから WebView2ランタイムの「Evergreen Bootstrapper」をインストールしましょう。

Edge(Canaryチャネル)をインストールする場合は、こちらからダウンロードしましょう。

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

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」を入力し、右側で適用するプロジェクトを選択してインストールします。
Microsoft.Toolkit.Forms.UI.Controls.WebView

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

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

参考