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ランタイムのインストール

ここから WebView2ランタイムの「Evergreen Bootstrapper」をインストールしましょう。
Windows11の場合は最初からWebView2ランタイムが入っていますので、インストールは不要です。
WebView2ランタイムの「Evergreen Bootstrapper」をインストール


WebView2 SDKのインストール

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

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

検索欄に「WebView2」を入力し、右側で適用するプロジェクトを選択してインストールします。
バージョンは最新の安定版のものを選びます。
Microsoft.Toolkit.Forms.UI.Controls.WebView

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

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

その他

ツールボックスにWebView2が表示されない場合

Nugetでインストールした直後はツールボックスに現れない場合があります。
その時はいったん保存して再度VisualStudioを立ち上げなおしてください。

VisualStudio2017の場合、パッケージ管理方法の変更が必要

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

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

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

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

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

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

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

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

WebView2コントロールでの操作方法

次のページでWebView2コントロールでの具体的な操作方法について解説します。
WebView2コントロールでの操作

参考