WPF WebView2 を試す

webview2 確認アプリ開発

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

環境

準備

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

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

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

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

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

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

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

エバーグリーン スタンドアロン インストーラー ダウンロード
Microsoft Edge WebView2 Runtime ダウンロード

インストール

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

Microsoft Edge WebView2 Runtime インストール

WebView2 を使ったアプリを作る

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

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

WPF App (.NET)

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

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

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

Microsoft.Web.WebView2
変更のプレビュー

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

画面に WebView2 を追加する

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

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

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 のホームページが表示されると思います。

webview2 確認

参考

Microsoft Edge WebView2 control - Microsoft Edge Development
Microsoft Edge WebView2 control を使用して Win32、.NET、UWP アプリケーションの web コンテンツをホストする

タイトルとURLをコピーしました