WebViewコントロールを使う

WebViewコントロールとは

※後継のWebView2がリリースされていますので、こちらを使用してください。
WebView2コントロールの準備

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

WebViewコントロールはEdgeブラウザ(EdgeHTMLエンジン)をベースとしてますので、そういった問題が解消されます。
ただし現時点では開発で使うまでに結構手間がかかります。

※近々、EdgeブラウザのエンジンがBlinkエンジンに変わることで、WebViewコントロールは廃止され、ChromiumベースのWebView2コントロールに変わります。

準備

必要環境

開発の為に必要な環境は以下になります。
・Windows10 1803(ビルド17110)以降
・VisualStudio 2017以降
・.NET Framework 4.6.2以降

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

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

変更方法ですが、ソリューションエクスプローラーで「packages.config」を右クリックして、 「packages.config を PackageReference に移行する」を実行すればよいです。

ついでに、今後はPackageReferenceが使われるようにVisualStudioの設定を変えましょう。

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

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

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

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

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

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

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


Windows Community Toolkitの導入

NuGetから「Microsoft.Toolkit.Forms.UI.Controls.WebView」のパッケージをインストールします。

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

検索欄に「Microsoft.Toolkit.Forms.UI.Controls.WebView」を入力すると下に表示されるので選択します。
右側で適用するプロジェクトを選択して、インストールします。
Microsoft.Toolkit.Forms.UI.Controls.WebView

フォーム画面に貼り付けられるよう、WebViewをツールボックスから選択できるようにします。
ツールボックスの空いている箇所で右クリックし、「アイテムの選択」をクリックします。
ツールボックス

「参照」ボタンを押します。
Microsoft.Toolkit.Win32.UI.Controls.dll

開かれた画面でMicrosoft.Toolkit.Win32.UI.Controls.dll」を選択します。
このファイルは「C:\Users\{ユーザー名}\.nuget\packages\microsoft.toolkit.forms.ui.controls.webview\6.0.0\lib\net462」にあります。
DLLの選択

するとWebViewが現れますので、選択します。
DLLの選択

ツールボックスに現れますので、フォームに貼り付けられます。
DLLの選択
DLLの選択

アプリを実行するとこのように表示されます。 DLLの選択

参考