WinUI 3 (Windows アプリ SDK) アプリでの WebView2 の概要

[アーティクル]
11/06/2024

この記事では、開発ツールを設定し、WinUI 3 用の初期 WebView2 アプリ (Windows アプリ SDK) を作成する方法と、その過程で WebView2 の概念について説明します。最初に、WebView2 SDK を含む WindowsAppSDK を使用する 、空のアプリパッケージ (デスクトップの WinUI 3) Visual Studio プロジェクトテンプレートを使用します。次に、HTTPS URL への移動のみを許可する WebView2 コントロール、アドレスバーと Go ボタン、URL ロジックを追加します。

このチュートリアルでは、次の操作を行います。

開発環境を設定します。
空白の アプリ、パッケージ化 (デスクトップの WinUI 3) Visual Studio プロジェクトテンプレートを使用して、ボタンを含むアプリを定義する空白の WinUI 3 プロジェクトを作成します。
ボタンの代わりに WebView2 コントロールを追加し、最初に Microsoft ホームページに移動します。プロジェクトテンプレートでは、WebView2 SDK を含む Microsoft.WindowsAppSDK NuGet パッケージが使用されるため、WebView2 がサポートされています。
テキストボックスコントロールとしてアドレスバーを追加し、入力した HTTPS 文字列を使用して新しい Web ページに移動します。
WebView2 コントロールに JavaScript を挿入して、ユーザーがhttps://ではなく、http:// プレフィックスのみを持つ URL に移動しようとしたときに警告アラート (ダイアログ) を表示します。

完了したプロジェクト

このチュートリアルプロジェクトの完成したバージョンは、 WebView2Samples リポジトリで入手できます。

サンプル名: WinUI3GetStarted
リポジトリディレクトリ: WinUI3_GettingStarted
ソリューションファイル: WinUI3GetStarted.sln

手順 1: 最新の Visual Studio 2022 をインストールする

Visual Studio 2022 がインストールされ、最新の状態になっていることを確認します。

最新の Visual Studio 2022 をインストールするには:

[Visual Studio: IDE と Code エディター for Software Developers and Teams] に移動し、[Visual Studio 2022] セクションで [ダウンロード] ボタンをクリックし、[Community 2022 または別のバージョン] を選択します。
Microsoft Edge の右上にある [ ダウンロード ] ポップアップに、 VisualStudioSetup.exe が表示されます。 [ ファイルを開く] をクリックします。

Visual Studio インストーラーが開きます。
プロンプトに従い、既定値をそのまま使用します。次の手順では、ワークロードとワークロードのコンポーネントをインストールまたは更新します。

手順 2: 最新のWindows アプリ SDKをインストールする

Visual Studio 2022 に最新のWindows アプリ SDKがインストールされていることを確認します。 Windows アプリ SDKには Visual Studio プロジェクトテンプレートが含まれており、WebView2 SDK が含まれています。これらのプロジェクトテンプレートには、WebView2 SDK を含む WindowsAppSDK を使用する Blank App Packaged (Desktop の WinUI 3) プロジェクトテンプレートが含まれます。

Windows アプリ SDKは、Visual Studio 用 .NET Desktop Development ワークロードの Windows アプリ SDK C# テンプレート コンポーネントとしてインストールされます。 Visual Studio 2022 バージョン 17.1 より前のバージョンでは、「Windows アプリ SDKのツールをインストールする」で説明されているように、Windows アプリ SDKは代わりに Visual Studio 拡張機能としてインストールされていました。

最新の Visual Studio 2022 をインストールするには、最新のWindows アプリ SDK:

Windows で スタートキーを 押し、「 Visual Studio 2022」と入力します。

Visual Studio 2022 アプリが一覧表示されます。
[ 開く] をクリックします。

Visual Studio 2022 ダイアログが開き、[最近開く] や [作業の開始] などのセクションが表示されます。
[コードなしで続行] をクリックします。

Visual Studio が開きます。
[ ツール ] メニューの [ ツールと機能の取得] を選択します。

[Visual Studio インストーラー] ウィンドウが開きます。
[ ワークロード ] タブが選択されていることを確認します。
[デスクトップ & Mobile] セクションで、.NET デスクトップ開発ワークロードのカードを選択して、チェックマークが表示されるようにします。
右側の [インストールの詳細] ツリーの [.NET デスクトップ開発>オプション] で、ツリーの下部付近にある [Windows アプリ SDK C# テンプレート] コンポーネントのチェックボックスをオンにします。
[ 変更 ] ボタンをクリックします。

[ ユーザーアカウント制御 ] ダイアログが開きます。
[はい] ボタンをクリックします。

Visual Studio を閉じるよう求められます。
[ 続行 ] ボタンをクリックします (未保存の作業がない場合)。

Visual Studio では、最新の Windows アプリ SDK C# テンプレートコンポーネントをダウンロードしてインストールします。 [Visual Studio インストーラー] ウィンドウで、すべてのインストールが最新の状態であることを示すメッセージが表示され、Visual Studio 2022 が開きます。

手順 3: 空白の WinUI 3 プロジェクトを作成する

次に、WinUI 3 (Windows アプリ SDK) 用の基本的な WebView2 アプリであるプロジェクトを作成します。このデスクトップアプリには、1 つのメインウィンドウが含まれます。プロジェクトにはまだ WebView2 コードが含まれません。

WinUI 3 用の WebView2 アプリを作成するには (Windows アプリ SDK):

Visual Studio が実行されている場合は、[ファイル>New>Project] を選択します。 [ 新しいプロジェクトの作成 ] ダイアログが開きます。
Visual Studio 2022 が実行されていない場合:
1. Windows で スタートキーを 押し、「 Visual Studio 2022」と入力します。
  
  Visual Studio 2022 アプリが一覧表示されます。
2. [ 開く] をクリックします。
  
  Visual Studio 2022 のスタートアップダイアログが開き、[最近開く] や [作業の開始] などのセクションが表示されます。
3. [作業の開始] セクションで、[新しいプロジェクトの作成] カードをクリックします。 [ 新しいプロジェクトの作成 ] ウィンドウが開きます。
[ 新しいプロジェクトの作成 ] ウィンドウの [ テンプレートの検索 ] フィールドに、「 デスクトップ」に「WinUI 3」と入力します。

前の主要な手順でインストールしたプロジェクトテンプレートが一覧表示されます。
[空のアプリ]、[パッケージ (デスクトップの WinUI 3)] カードクリックして選択し、[次へ] ボタンをクリックします。

[ 新しいプロジェクトの構成 ] ダイアログが表示されます。
[ プロジェクト名 ] テキストボックスに、 WinUI3GetStarted などのプロジェクト名を入力します。
[ 場所 ] テキストボックスに「」と入力するか、 C:\Users\myUsername\source\などのディレクトリに移動します。
[作成] ボタンをクリックします。

プロジェクトが作成されます。

ソリューションエクスプローラーの新しい WinUI 3 プロジェクト

"Microsoft.WindowsAppSDK パッケージのインストールに失敗しました" というダイアログが表示されたら、[OK] ボタンをクリック します 。

手順 4: Windows アプリ SDKを更新またはインストールする

Visual Studio で新しいプロジェクトを作成するときに、ソリューションの NuGet パッケージの状態をチェックします。必要な NuGet パッケージがプロジェクトテンプレートによってインストールされていることを確認し、プロジェクトに最新の機能と修正プログラムが含まれるように、パッケージが更新されていることを確認します。

プロジェクトの最新のWindows アプリ SDK NuGet パッケージを更新またはインストールするには、

Visual Studio のソリューションエクスプローラーで、WinUI3GetStarted プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。

Visual Studio の [ NuGet: WinUI3GetStarted ] タブが開きます。プロジェクトテンプレートを使用してプロジェクトの作成時に Microsoft.WindowsAppSDK パッケージがインストールされている場合は、[ インストール済み ] タブが選択され、そのパッケージが一覧表示されます。

[インストール済み] タブに Microsoft.WindowsAppSDK パッケージが表示されない場合:
[ 参照 ] タブをクリックし、[ 検索 ] テキストボックスに 「Microsoft.WindowsAppSDK」と入力します。
Microsoft.WindowsAppSDK カードを選択します。
右側の [ インストール ] ボタンをクリックします。

[ 変更のプレビュー ] ダイアログが開きます。
[ 適用 ] ボタンをクリックし、ライセンス条項に同意します。

Microsoft.WindowsAppSDK NuGet パッケージがインストールされています。
[NuGet - ソリューション] タブで、[Updates] タブをクリックし、必要に応じて、そこに一覧表示されているすべてのパッケージを更新します。
[NuGet - ソリューション] タブを閉じます。

手順 5: プロジェクトをビルドして実行する

新しい WinUI 3 プロジェクトは、Visual Studio のソリューションエクスプローラーで開いたままです。

ソリューションエクスプローラーの新しい WinUI 3 プロジェクト

App.xaml.cs ファイルは、アプリインスタンスを表す Application クラスを定義します。
MainWindow.xaml.cs ファイルは、アプリインスタンスによって表示されるメインウィンドウを表すMainWindow クラスを定義します。クラスは、WinUI の Microsoft.UI.Xaml 名前空間の型から派生します。

プロジェクトをビルドして実行するには:

[ファイル] >[すべて保存] (Ctrl + Shift + S) を選択します。
[ デバッグ>開始 (F5)] を選択します。

[ Windows の開発者モードを有効にする] ダイアログが開く場合があります。
そのダイアログが表示されたら、 開発者向けの設定をクリックし、[ 開発者モード ] トグルをオンにし、[ はい ] ボタンをクリックし、Visual Studio ダイアログの [ 閉じる ] ボタンをクリックします。開発者モードの詳細については、「Windows 用デスクトップアプリをビルドする」を参照してください。

プロジェクトがビルドされます。空白の WinUI Desktop アプリが開き、WebView2 コントロールはまだ追加されていません。
[ 自分をクリック] ボタンをクリックします。

ボタンラベルが [クリック済み] に変わります。
アプリを閉じます。

手順 6: WebView2 コントロールを追加する

プロジェクトは、WebView2 SDK を含む Microsoft.WindowsAppSDK NuGet パッケージを使用するプロジェクトテンプレート Blank App Packaged (Desktop の WinUI 3) に基づいています。そのため、WebView2 コードを追加できます。 MainWindow.xamlファイルとMainWindow.xaml.cs ファイルを編集して、WebView2 コントロールを空白の WinUI 3 アプリプロジェクトに追加し、最初に Microsoft ホームページを読み込みます。 XAML ファイルでは、WebView コントロールに次のようなタグが付きます。

<controls:WebView2 x:Name="MyWebView" Source="https://www.microsoft.com">

最初に Microsoft ホームページに移動する WebView2 コントロールを追加するには:

Visual Studio のソリューションエクスプローラーで、[MainWindow.xaml] をダブルクリックします。

ファイルがコードエディターで開きます。

次の属性をコピーして、xml 名前空間の一覧の末尾にある <Window> 開始タグ内に貼り付けます。

xmlns:controls="using:Microsoft.UI.Xaml.Controls"

そのコードにより、WebView2 XAML 名前空間が追加されます。 MainWindow.xamlのコードが次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="MyWebView2WinUI3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWebView2WinUI3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

<StackPanel>要素 (3 行) を削除します。

</Window>終了タグの上に、次の<Grid>要素を貼り付けます。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <controls:WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2"
        Source="https://www.microsoft.com" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"/>
</Grid>

この<Grid>要素には、MyWebView という名前の<controls:WebView2>要素が含まれています。この要素には、WebView2 コントロール (https://www.microsoft.com) に表示される初期 URI を設定するSource属性があります。アプリが開くと、WebView2 コントロールに Microsoft.com ホームページが最初に表示されます。

ソリューションエクスプローラーで、[MainWindow.xaml] を展開し、[MainWindow.xaml.cs] をダブルクリックします。
MainWindow.xaml.csで、myButton_Click メソッドで次の C# コード行を削除します。
```
myButton.Content = "Clicked";
```
メソッドは今のところ空です。後でアドレスバーの [移動 ] ボタンに使用します。
[ファイル] >[すべて保存] (Ctrl + Shift + S) を選択します。
F5 キーを押します。

プロジェクトがビルドされ、アプリが開きます。

アプリは、WebView2 コントロールを含む WebView2 ホストアプリです。 WebView2 コントロールは、最初に Web サイトの https://www.microsoft.comを表示します。 [アドレスバー] テキストボックスまたは [移動 ] ボタンがまだありません。
アプリを閉じます。

ユーザーが WebView2 コントロールに表示される Web ページを制御できるようにするには、次のようにアドレスバーをアプリに追加します。

MainWindow.xamlで、<controls:WebView2> 要素の上の <Grid> 要素内に次のコードを貼り付けます。

   <TextBox Name="addressBar" Grid.Column="0"/>
   <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>

MainWindow.xaml ファイル内の結果の <Grid> 要素が次の要素と一致することを確認します。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBox Name="addressBar" Grid.Column="0"/>
    <Button x:Name="myButton" Grid.Column="1" Click="myButton_Click">Go</Button>

    <controls:WebView2 x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2"
        Source="https://www.microsoft.com" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch"/>
</Grid>

MainWindow.xaml.csで、次のtry/catch ブロックを myButton_Click メソッドの本文に貼り付けます。
```
private void myButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        Uri targetUri = new Uri(addressBar.Text);
        MyWebView.Source = targetUri;
    }
    catch (FormatException ex)
    {
        // Incorrect address entered.
    }
}
```
このコードは、ユーザーが [Go] ボタンをクリックしたときに、<controls:WebView2 x:Name="MyWebView"> 要素の Source 属性と同じ MyWebView.Source プロパティの値を再設定することで、ユーザーがアドレスバーに入力した URL に WebView2 コントロールを移動します。
[ファイル] >[すべて保存] (Ctrl + Shift + S) を選択します。
F5 キーを押します。

プロジェクトがビルドされ、アプリが開き、最初に Microsoft ホームページが表示されます。 [アドレスバー] と [ 移動 ] ボタンが表示されるようになりました。
アドレスバーに新しい完全な HTTPS URL ( https://www.bing.comなど) を入力し、[ 移動 ] ボタンをクリックします。

アプリの WebView2 コントロールには、Bing Web サイトが表示されます。アドレスバーには、 https://www.bing.comなどの URL が表示されます。
アドレスバーに不完全な URL ( bing.comなど) を入力し、[ 移動 ] ボタンをクリックします。

WebView2 コントロールは、その URL への移動を試みません。 URL が http:// または https://で始まらないため、例外がスローされます。 try セクションでは、addressBar.Text文字列はhttp://またはhttps://で始まっていませんが、URI 以外の文字列は Uri コンストラクターに渡され、System.UriFormatException例外がスローされます。 Visual Studio の [出力 ] ウィンドウに、"例外がスローされました: 'System.UriFormatException' が System.Private.Uri.dll に表示されます。アプリは引き続き実行されます。
アプリを閉じます。

WebView2 コントロールをホストするアプリは、次のイベントをリッスンします。

NavigationStarting
SourceChanged
ContentLoading
HistoryChanged
NavigationCompleted

これらのイベントは、Web ページナビゲーション中に WebView2 コントロールによって発生します。 HTTP リダイレクトが発生した場合、1 行に複数の NavigationStarting イベントがあります。詳細については、「 WebView2 アプリのナビゲーションイベント」を参照してください。

エラーが発生すると、次のイベントが発生し、エラー Web ページが表示される可能性があります。

SourceChanged
ContentLoading
HistoryChanged

このセクションでは、ナビゲーションイベントを処理してさまざまな種類の URL に移動する WebView2 Core ライブラリをインポートするコードを追加します。

ナビゲーションイベントを処理するには:

MainWindow.xaml.csで、他のusingステートメントの上の先頭に次の行を追加します。
```
using Microsoft.Web.WebView2.Core;
```
HTTPS 以外の要求を取り消す NavigationStarting のハンドラーを登録します。
MainWindow.xaml.csのコンストラクターで、次のNavigationStarting行を追加します。
```
public MainWindow()
{
    this.InitializeComponent();
    MyWebView.NavigationStarting += EnsureHttps;
}
```
この行は、 EnsureHttps メソッド (以下に追加) を NavigationStarting イベントのリスナーとして登録します。

コンストラクターの下に、次の EnsureHttps メソッドを追加します。

private void EnsureHttps(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

[ファイル] >[すべて保存] (Ctrl + Shift + S) を選択します。
F5 キーを押します。

プロジェクトがビルドされ、アプリが開きます。
アプリの [アドレス] バーに、 http://bing.comなどの HTTP URL を入力し、[ 移動 ] ボタンをクリックします。

ナビゲーションは HTTP サイトに対してブロックされるため、アプリはそのページに移動しません。表示されるサイトが変更されなかった理由をユーザーに伝えるダイアログはまだ追加されていません。
https://bing.comなどの HTTPS URL を入力し、[Go] ボタンをクリックします。

HTTPS サイトではナビゲーションが許可されているため、アプリは指定したページに移動します。
アプリの [アドレス] バーに、 bing.comなどのプレフィックスのない文字列を入力し、[ 移動 ] ボタンをクリックします。

アプリはそのページに移動しません。以前と同様に UriFormatException 例外がスローされ、Visual Studio の [出力 ] ウィンドウに表示されます。
アプリを閉じます。

手順 9: JavaScript を挿入して、HTTPS 以外のアドレスについてユーザーに警告する

ホストアプリを使用すると、実行時に JavaScript コードを WebView2 コントロールに挿入できます。 WebView2 にタスクを実行して任意の JavaScript を実行したり、初期化スクリプトを追加したりできます。挿入された JavaScript は、JavaScript が削除されるまで、すべての新しい最上位ドキュメントと子フレームに適用されます。挿入された JavaScript は、次のいずれかのタイミングで実行されます。

グローバルオブジェクトの作成後に、挿入された JavaScript を実行します。
挿入された JavaScript を実行してから、HTML ドキュメントに含まれている他のスクリプトを実行します。

以下では、ユーザーが HTTPS 以外のサイトを開こうとしたときにアラートを表示する JavaScript を追加します。これを行うには、 ExecuteScriptAsync を使用する Web コンテンツにスクリプトを挿入します。

ユーザーが HTTPS 以外のサイトに移動しようとしたときにアラートを表示するには:

MainWindow.xaml.csの EnsureHttps メソッドで、次のExecuteScriptAsync行を追加します。

private void EnsureHttps(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
{
    String uri = args.Uri;
    if (!uri.StartsWith("https://"))
    {
        MyWebView.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
        args.Cancel = true;
    }
    else
    {
        addressBar.Text = uri;
    }
}

[ファイル] >[すべて保存] (Ctrl + Shift + S) を選択します。
F5 キーを押します。

プロジェクトがビルドされ、アプリが開きます。
アプリのアドレスバーに、 http://www.bing.comなどの HTTPS 以外の URL を入力し、[ 移動 ] ボタンをクリックします。

アプリの WebView2 コントロールには、HTTPS 以外の Web サイトのアラートダイアログが表示され、HTTPS 以外の uri は安全ではないというメッセージが表示されます。
アプリを閉じます。

これで、WebView2 WinUI 3 (Windows アプリ SDK) アプリが構築されました。

WinAppSDK では、カスタム WebView2 環境がサポートされます

WinAppSDK では、WinAppSDK 1.5 (1.5.0-experimental2) 以降のカスタム WebView2 環境がサポートされています。詳細については、「 WinUI3 WebView2 とカスタム CoreWebView2Environment」を参照してください。

カスタム WebView2 環境をインスタンス化するには、次に示す WebView2.EnsureCoreWebView2Async のいずれかのオーバーライドを使用して WebView2 を初期化し、カスタム CoreWebView2Environment (および必要に応じてカスタム CoreWebView2ControllerOptions) を渡します。

public IAsyncAction EnsureCoreWebView2Async (CoreWebView2Environment environment)
public IAsyncAction EnsureCoreWebView2Async (CoreWebView2Environment environment, CoreWebView2ControllerOptions controllerOptions)

以下の「SmartScreen ナビゲーションを無効にする」のコード例も参照してください。

API リファレンス:

WinUI 3 WebView2 の特別な考慮事項

WebView2 は、アプリケーション内のに移動した URL を SmartScreen サービスに送信して、顧客のセキュリティを確保します。このナビゲーションを無効にする場合は、次のようにカスタム CoreWebView2Environmentを使用します。

CoreWebView2EnvironmentOptions environmentOptions = new CoreWebView2EnvironmentOptions();
environmentOptions.AdditionalBrowserArguments = "--disable-features=msSmartScreenProtection";

string browserFolder = null; // Use null to get default browser folder
string userDataFolder = null; // Use null to get default user data folder
CoreWebView2Environment environment = await CoreWebView2Environment.CreateWithOptionsAsync(
    browserFolder, userDataFolder, environmentOptions);

// ...

this.WebView2.EnsureCoreWebView2Async(environment);

環境変数を使用して SmartScreen を無効にする

環境変数の使用は推奨されなくなりました。代わりに、上記の API コードベースのアプローチを使用してください。

Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--disable-features=msSmartScreenProtection");

この環境変数は、 CoreWebView2 作成の前に設定する必要があります。これは、 WebView2.Source プロパティが最初に設定されたとき、または WebView2.EnsureCoreWebView2Async メソッドが最初に呼び出されたときに発生します。

DefaultBackgroundColor の設定

WebView2 for WinUI 3 では、webView2 XAML オブジェクトに DefaultBackgroundColor 設定が存在します。以下に例を示します。

public MainWindow()
{
    this.InitializeComponent();
    MyWebView.DefaultBackgroundColor = Colors.LightBlue;
}

Transparency

WinUI 3 では、透明な背景はサポートされていません。 WebView2 の透過的な背景のサポートを参照してください。 ·問題 #2992。

カスタム WebView2 環境に対する WinAppSDK のサポート

上記の「WinAppSDK でカスタム WebView2 環境がサポートされる」を参照してください。

次の方法で共有

WinUI 3 (Windows アプリ SDK) アプリでの WebView2 の概要

完了したプロジェクト

手順 1: 最新の Visual Studio 2022 をインストールする

手順 2: 最新のWindows アプリ SDKをインストールする

手順 3: 空白の WinUI 3 プロジェクトを作成する

手順 4: Windows アプリ SDKを更新またはインストールする

手順 5: プロジェクトをビルドして実行する

手順 6: WebView2 コントロールを追加する

手順 7: ナビゲーションコントロールを追加する

手順 8: ナビゲーションイベントを処理する

手順 9: JavaScript を挿入して、HTTPS 以外のアドレスについてユーザーに警告する

WinAppSDK では、カスタム WebView2 環境がサポートされます

WinUI 3 WebView2 の特別な考慮事項

SmartScreen ナビゲーションを無効にする

環境変数を使用して SmartScreen を無効にする

DefaultBackgroundColor の設定

Transparency

カスタム WebView2 環境に対する WinAppSDK のサポート

関連項目

フィードバック

その他のリソース

次の方法で共有

WinUI 3 (Windows アプリ SDK) アプリでの WebView2 の概要

完了したプロジェクト

手順 1: 最新の Visual Studio 2022 をインストールする

手順 2: 最新のWindows アプリ SDKをインストールする

手順 3: 空白の WinUI 3 プロジェクトを作成する

手順 4: Windows アプリ SDKを更新またはインストールする

手順 5: プロジェクトをビルドして実行する

手順 6: WebView2 コントロールを追加する

手順 7: ナビゲーション コントロールを追加する

手順 8: ナビゲーション イベントを処理する

手順 9: JavaScript を挿入して、HTTPS 以外のアドレスについてユーザーに警告する

WinAppSDK では、カスタム WebView2 環境がサポートされます

WinUI 3 WebView2 の特別な考慮事項

SmartScreen ナビゲーションを無効にする

環境変数を使用して SmartScreen を無効にする

DefaultBackgroundColor の設定

Transparency

カスタム WebView2 環境に対する WinAppSDK のサポート

関連項目

フィードバック

その他のリソース

手順 7: ナビゲーションコントロールを追加する

手順 8: ナビゲーションイベントを処理する