WebViewコントロールを使う
WebViewコントロールとは
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を使ってビルドすると以下のエラーがでました。
変更方法ですが、ソリューションエクスプローラーで「packages.config」を右クリックして、
「packages.config を PackageReference に移行する」を実行すればよいです。
ついでに、今後はPackageReferenceが使われるようにVisualStudioの設定を変えましょう。
メニューの[ツール]->[NuGetパッケージマネージャー]->[パッケージマネージャー設定]を選択します。
「パッケージの管理」の「既定のパッケージ管理形式」を"PackageReference"に設定してください。
ターゲットフレームワークの設定
ビルド時に使用する.NET Frameworkが4.6.2以降になっている必要があります。
プロジェクトのプロパティからアプリケーションを選択し、ターゲットフレームワークを確認してください。
もし4.6.2より古いフレームワークが選択されていた場合は変更します。
新しいバージョンがインストールされていない場合は選択できません。
その場合、「別のフレームワークをインストールします」をクリックし、表示されるサイトからダウンロード&インストールします。
「Developer Pack」のリンクをクリックするとインストーラーがダウンロードされます。
インストールすればVisualStudioから選択できるようになります。
Windows Community Toolkitの導入
NuGetから「Microsoft.Toolkit.Forms.UI.Controls.WebView」のパッケージをインストールします。
メニューの[ツール]->[NuGetパッケージマネージャー]->[ソリューションのNuGetパッケージの管理]を選択します。
検索欄に「Microsoft.Toolkit.Forms.UI.Controls.WebView」を入力すると下に表示されるので選択します。
右側で適用するプロジェクトを選択して、インストールします。
フォーム画面に貼り付けられるよう、WebViewをツールボックスから選択できるようにします。
ツールボックスの空いている箇所で右クリックし、「アイテムの選択」をクリックします。
「参照」ボタンを押します。
開かれた画面でMicrosoft.Toolkit.Win32.UI.Controls.dll」を選択します。
このファイルは「C:\Users\{ユーザー名}\.nuget\packages\microsoft.toolkit.forms.ui.controls.webview\6.0.0\lib\net462」にあります。
するとWebViewが現れますので、選択します。
ツールボックスに現れますので、フォームに貼り付けられます。
アプリを実行するとこのように表示されます。
参考