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」をインストールしましょう。
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の選択

その他

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

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

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

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

参考