.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果

.NET の Windows FormsアプリケーションでWebView2を利用する手順、コードと実行結果を紹介します。

概要

WebView2を利用して、Webページを表示するWindows Forms アプリケーションを作成します。

手順

Windows Forms アプリケーションの作成

.NET のWindows Forms アプリケーションを作成します。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像1

WebView2 ライブラリのインストール

Microsoft.Web.WebView2 NuGetパッケージをインストールします。
NuGet パッケージマネージャー コンソールの場合は、次のコマンドを実行します。
NuGet\Install-Package Microsoft.Web.WebView2 -Version (最新バージョン)
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像2

GUIのNuGet パッケージマネージャーの場合は、"Microsoft.Web.WebView2" で検索してパッケージをインストールします。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像3

WebView2コントロールのフォームへの配置

WebView2 のパッケージをインストール後、フォームデザイナを表示します。
ツールボックスに[WebView2]のカテゴリが追加され、WebView2コントロールが追加されています。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像4 .NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像5

ツールボックスのWebView2コントロールをフォームにドラッグ&ドロップして配置します。フォームに配置した状態が下図です。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像6

ハンドルをドラッグしてWebView2コントロールをフォームの全体と同じ大きさにします。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像7

ウィンドウのサイズに応じてコントロールの大きさが変わるよう、Anchorプロパティを設定します。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像8 .NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像9

WebView2で読み込むコンテンツをSourceプロパティで指定します。今回はWebページを表示することにします。 Sourceプロパティの値を "https://www.ipentec.com" に設定します。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像10 .NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像11

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。Sourceプロパティに指定したページが画面に表示されます。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像12

ページのスクロールもできます。リンクをクリックするとページ遷移もできます。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像13

.NET のWindowsフォームアプリケーションで、WebView2コントロールを利用したアプリケーションを実装できました。

補足: ツールボックスにWebView2コントロールが表示されない場合

フォームの編集画面でツールボックスウィンドウを開きます。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像14

右クリックしてポップアップメニューを表示します。[アイテムの選択]の項目をクリックします。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像15

下図の[ツールボックス アイテムの選択]ダイアログが表示されます。[.NET Framework コンポーネント]のタブをクリックして選択し、 ウィンドウ右下の[参照]ボタンをクリックします。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像16

[開く]ダイアログが表示されますので、Microsoft.Web.WebView2.WinForms.dll を選択して開きます。
dllファイルの配置位置はVisual Studioのバージョンにより異なります。以下のどちらかになります。
  • C:\Users\(現在のログインユーザー)\.nuget\packages\Microsoft.Web.WebView2\(バージョン番号)\\lib\net462 フォルダ
  • プロジェクトのフォルダ内の (プロジェクトルート)\packages\Microsoft.Web.WebView2.(バージョン番号)\lib\net45 フォルダ

.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像17

補足
...\lib\netcoreapp3.0 フォルダにも、Microsoft.Web.WebView2.WinForms.dll ファイルがあります。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像18

こちらのファイルを読み込むと、「Microsoft.Web.WebView2.WinForms.dll はツールボックス項目を動的に列挙できないプラットフォームを対象としています。」の エラーメッセージが表示されます。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像19
開くと、"WebView2" コントロールが読み込まれて[.NET Framework コンポーネント]の一覧に表示されます。
項目の左側のチェックボックスにチェックがついていることを確認しダイアログの[OK]ボタンをクリックします。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像20

ダイアログが閉じられ、ツールボックスウィンドウに戻ります。ツールボックスに[WebView2]のグループが追加され、 グループ内に "WebView2" のコントロールが追加されています。
.NET の Windows FormsアプリケーションでWebView2を利用するコードと実行結果:画像21
AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2022-07-29
改訂日: 2024-06-29
Copyright © 1995–2025 iPentec all rights reserverd.