WPF WebView2 を試す | のい太ろぐ

WebView2 を使うと、Windowsアプリに HTML、CSS、JavaScript を埋め込むことができます。 web で培った技術を Windowsアプリに活かす事が出来るので、とっても魅力的だと思っています。

環境
準備
1. エバーグリーンブートストラップ
2. エバーグリーンスタンドアロンインストーラー
WebView2 を使ったアプリを作る
1. 画面に WebView2 を追加する
参考

環境

Windows 10 Home 20H2
Visual Studio Community 2019
.NET Core 3.1
Microsoft.Web.WebView2 1.0.721-prerelease

準備

WebView2 を使うには WebView2ランタイムのインストールが必要です。

ダウンロードページに行って少しスクロールすると、ダウンロードリンクがあるので、自分の環境にあったインストーラーをダウンロードしインストールしておきます。

エバーグリーンブートストラップ

ブートストラップ版は、インストール時に必要なファイルをダウンロードするタイプです。なので、インストーラーのサイズは小さいですが、インストール時にインターネットに繋がっている必要があります。

エバーグリーンスタンドアロンインストーラー

スタンドアロン版は、ブートストラップと違いインストーラーに必要なファイルが全て含まれているため、ファイルサイズが大きいのが特徴です。そのため、インターネットに繋がっていなくてもインストールする事が出来ます。

お好きな方をダウンロードして下さい。私はスタンドアロンが好きなので断然こっちですね。

インストール

ダウンロードした実行ファイルを開くと、インストールが開始されます。ボタン操作は必要ありませんでした。

WebView2 を使ったアプリを作る

今回は WPFアプリケーションを作成します。

プロジェクト作成時に「WPF App (.NET)」を選びます。

プロジェクトが出来上がったら、NuGet（ナゲット）を使って WebView2 SDK をプロジェクトに追加します。

「ツール > NuGetパッケージマネージャー > ソリューションのNuGetパッケージの管理」

参照タブを選んで「Microsoft.Web.WebView2」を検索して WebView2 をインストールします。

これで WebView2 を使ったアプリを作る準備が出来ました。

画面に WebView2 を追加する

ここからアプリ開発に入ります。

まず「MainWindow.xaml」をデザイナーで開きます。

Windowタグ内に WebView2 XAML の名前空間を追加します。

xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

こんな感じになれば OK

<Window x:Class="wpf_webview2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf_webview2"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

次に WebView2コントロールを追加して、Sourceプロパティに初期URLを設定します。

<wv2:WebView2 Name="webView" Source="https://www.google.com/"/>

こんな感じになれば OK

<Window x:Class="wpf_webview2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf_webview2"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <wv2:WebView2 Name="webView" Source="https://www.google.com/"/>
    </Grid>
</Window>

F5キーを押して実行すると Google のホームページが表示されると思います。