在 WPF 應用程式中開始使用 WebView2

本文是為了學習如何撰寫你自己的 WebView2 程式碼。如果你想先執行範例，可以參考 Win32 範例應用程式或其他範例應用程式文章，例如 WPF 範例應用程式。

本文將介紹如何設定你的開發工具，並為 Windows Presentation Foundation (WPF) 建立初始 WebView2 應用程式，並在此過程中學習 WebView2 的概念。

在這個教學中，你會使用 WPF 應用程式或 WPF 應用程式 (.NET Framework) 專案範本來建立 WPF 應用程式，然後安裝專案的 WebView2 SDK 以加入 WebView2。

完成的專案

此教學專案的完成版本可在 WebView2Samples 倉庫中取得：

範例名稱： WPF_GettingStarted
倉庫目錄： WPF_GettingStarted
解答檔案： WPFSample.sln

步驟 1 - 安裝支援 .NET 的 Visual Studio

此教學需要使用 Microsoft Visual Studio，而非 Microsoft Visual Studio Code。本文主要描述如何使用 Visual Studio 2022。

安裝 Visual Studio。安裝 .NET 桌面開發 支援，取得所需的專案範本，方法如下。
如果你在 Visual Studio 啟動畫面，請捲動到 「建立新專案 」對話框底部，點擊「 無程式碼開啟」連結。 Visual Studio 開啟。
在 Visual Studio 中，選擇 「工具>」「取得工具與功能」。 Visual Studio 安裝程式視窗會打開，並會跳出修改對話框。
選擇 .NET 桌面開發 工作負載，這樣上面有勾勾。
在右側的「安裝細節>」部分。NET桌面開發>包含，請確認列出 .NET 桌面開發工具與 .NET Framework 4.7.2 開發工具，並在旁邊勾選。
在右側的 「安裝詳情>.NET 桌面開發>」部分中：
- 如果你使用 Visual Studio 2022，請確保已選擇 .NET 開發工具 ：
- 如果你使用 Visual Studio 2019，請確定選擇了 .NET 開發工具 ：
點擊修改按鈕。

這個教學也能支援 Visual Studio 2017。請參閱 Visual Studio 較舊的下載版本。安裝 .NET 支援，取得所需的專案範本，步驟類似上述步驟。

步驟 2 - 建立單視窗 WebView2 應用程式

先建立一個包含單一主視窗的基本桌面專案。

決定是建立一個 .NET Core/5/6 專案 (較新的) ，還是建立一個 WPF 應用程式 (.NET Framework) 專案 (舊) 。如需詳細資訊，請參閱：
- .NET 歷史，請參考 What is .NET？導言與概述。
- .NET 在維基百科。
請依照下方相關章節操作。

建立 .NET Core/5/6 專案

如果你正在建立 .NET Core/5/6 專案，請採取以下步驟。否則，請跳到「建立 WPF 應用程式 (.NET Framework) 專案」。

開啟 Microsoft Visual Studio，例如 Visual Studio 2022。
在開場面板中，點選 建立新專案。或者，在 Visual Studio 主視窗中，選擇 「檔案>新>專案」。「 建立新專案 」對話框隨即開啟。
在 「搜尋範本」 文字框中，輸入 WPF Application。 「建立新專案」面板會顯示已安裝的專案範本，與你輸入的文字相符。本文展示了 C# 而非 VB 對話;兩種語言皆支援 WebView2。
如果你正在使用 Visual Studio 2022，請點選一個標題為 WPF 應用程式 的專案範本，並說明文字為「 建立 .NET WPF 應用程式的專案：

如果你正在使用 Visual Studio 2019，請點選標題為 WPF 應用程式 、描述文字為 .NET Core WPF 應用程式的專案範本：

如果上述專案範本未被列出，請參考上方步驟 1 - 安裝支援 .NET 的 Visual Studio ，以安裝 .NET 桌面開發工具。
點擊 「下一個 」按鈕。

「 配置您的新專案：WPF 應用程式 」對話框隨即開啟：
在 專案名稱 文字框中，輸入專案名稱，例如 MyWpfDotnetCoreWv2App。
在 「位置 」文字框中，選擇你本地硬碟上的路徑，例如 C:\Users\myusername\Documents\MyProjects，然後點擊 「下一 頁」按鈕。

新增資訊對話框會出現，並附帶 目標框架 下拉選單：
選擇 .NET Core 3.1 或更新版本，例如 .NET 6.0。 (不要選擇 .NET Core 3.0.) 然後點擊 「建立 」按鈕。

初始的 .NET Core WPF 應用程式專案在 Visual Studio 中開啟：

跳到步驟 3 - 在下方建立並執行不使用 WebView2 的初始專案。

建立 WPF 應用程式 (.NET Framework) 專案

如果你正在建立 WPF 應用程式 (.NET Framework) 專案，請依照以下步驟進行。否則，直接跳到步驟 3 - 建立並執行不使用 WebView2 的初始專案。

開啟 Microsoft Visual Studio，例如 Visual Studio 2022。
在開場面板中，點選 建立新專案。或者，在 Visual Studio 主視窗中，選擇 「檔案>新>專案」。「 建立新專案 」對話框隨即開啟。
在 「搜尋範本」 文字框中，輸入 WPF App。 「建立新專案」面板會顯示已安裝的專案範本，與你輸入的文字相符。本文展示了 C# 而非 VB 對話;兩種語言皆支援 WebView2。
點擊一個標題為 WPF 應用程式 (.NET Framework) 且描述文字為客戶端應用程式Windows Presentation Foundation專案範本：

如果上述專案範本未被列出，請參考上方步驟 1 - 安裝支援 .NET 的 Visual Studio ，以安裝 .NET 桌面開發工具。
點擊 「下一個 」按鈕。

「配置您的新專案：WPF 應用程式」對話框 (.NET Framework) 開啟：
在 專案名稱 文字框中輸入專案名稱，例如 MyWpfDotnetFwkWv2App。
在 「位置 」文字框中，選擇你本地硬碟上的路徑，例如 C:\Users\myusername\Documents\MyProjects。
在 Framework 下拉選單中，選擇 .NET Framework 4.6.2 或更新版本。
點擊 「建立 」按鈕。

最初的 WPF 應用程式 (.NET Framework) 專案在 Visual Studio 中開啟：

步驟 3 - 建立並執行不使用 WebView2 的初始專案

選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。

專案執行時會顯示一個空白視窗：

你可能需要安裝選定的 .NET Framework 版本，如下。
如果應用程式無法開啟，請選擇「除錯>開始」而不除錯。

如果你還沒安裝選定的 .NET Framework 版本，可能會看到以下對話框：「此應用程式無法啟動。該應用程式需要以下其中一個版本的 .NET Framework：。NETFramework，Version=v4.8.1 - 你現在想安裝這個 .NET Framework 版本嗎？」
如果出現這樣的對話框，請前往下載 .NET Framework，然後下載並安裝所需的開發者包版本， (而非執行時) 。例如，下載 ndp481-devpack-enu.exe 到 C:\Users\username\Downloads，然後雙擊該檔案安裝。
如果被要求，請重新啟動你的電腦：
前往下載的檔案，例如ndp481-devpack-enu.exe在 C:\Users\username\Downloads，再次雙擊下載檔案即可安裝 .NET Framework 開發者包。會出現成功對話框：
如果被要求，請重新啟動電腦。
打開 Visual Studio，打開你建立的解決方案。
按 F5 執行) (顯示的初始應用程式，尚未包含 WebView2 SDK。
關閉初始應用程式。

步驟 4 - 安裝 WebView2 SDK

在 Visual Studio 中，使用 NuGet Package Manager 將 WebView2 SDK 加入專案，步驟如下：

在方案總管中，根據 .NET (Core) 或.NET Framework專案範本) ，右鍵點擊專案名稱 (，然後選擇管理 NuGet 套件：
在左上角點選「瀏覽」標籤。在搜尋欄輸入 Microsoft.Web.WebView2，然後點選 Microsoft.Web.WebView2 套件。

NuGet 套件管理器對話框會顯示搜尋結果，包括 Microsoft.Web.WebView2 套件。對話框有一個版本號和安裝按鈕。
接受預設版本，然後點擊安裝按鈕。
在 預覽變更 對話框中，點擊確定按鈕。
選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。

專案執行時會顯示一個空白視窗。此測試可驗證 WebView2 已安裝且正常運作，儘管 WebView2 尚未顯示任何內容：
關閉應用程式。

步驟 5 - 建立單一 WebView2 控制項

在你的應用程式中新增 WebView2 控制項。

在檔案中 MainWindow.xaml ，若要新增 WebView2 XAML 命名空間，請在標籤內 <Window/> 插入以下行：
```
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
```

確保輸入 MainWindow.xaml 的程式碼看起來像以下這些：

<Window x:Class="WPF_Getting_Started.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:{YOUR PROJECT NAME}"
      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 控制項，請用以下程式碼替換標籤 <Grid> 。該 Source 屬性設定 WebView2 控制項中顯示的初始 URI。
```
<DockPanel>
   <wv2:WebView2 Name="webView"
                  Source="https://www.microsoft.com"
   />
</DockPanel>
```
選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。
請確保您的 WebView2 控制項顯示：https://www.microsoft.com

讓使用者能透過在應用程式中新增地址列來更改 WebView2 控制所顯示的網址。

在 MainWindow.xaml 檔案中，複製並貼上包含 WebView2 控制項的程式碼 <DockPanel> 後，新增地址列。將現有程式碼保留在新片段下方。

<DockPanel DockPanel.Dock="Top">
    <Button x:Name="ButtonGo"
              DockPanel.Dock="Right"
              Click="ButtonGo_Click"
              Content="Go"
    />
    <TextBox Name="addressBar"/>
</DockPanel>

請確保 <DockPanel> 檔案的該區段 MainWindow.xaml 符合以下代碼：

<DockPanel>
    <DockPanel DockPanel.Dock="Top">
        <Button x:Name="ButtonGo" DockPanel.Dock="Right" Click="ButtonGo_Click" Content="Go"/>
        <TextBox Name = "addressBar"/>
    </DockPanel>
    <wv2:WebView2 Name = "webView"
                  Source = "https://www.microsoft.com"
    />
</DockPanel>

在 MainWindow.xaml.cs中，若要新增 CoreWebView2 命名空間，請在檔案頂端插入以下程式碼：
```
using Microsoft.Web.WebView2.Core;
```

在檔案中 MainWindow.xaml.cs複製以下程式碼以建立該 ButtonGo_Click 方法。此程式碼會導引 WebView2 控制項至地址列中輸入的 URL。

private void ButtonGo_Click(object sender, RoutedEventArgs e)
{
    if (webView != null && webView.CoreWebView2 != null)
    {
        webView.CoreWebView2.Navigate(addressBar.Text);
    }
}

請直接將程式碼貼在宣告後 Public MainWIndow 面，如下程式碼所示：

namespace WpfApp1
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
      public MainWindow()
      {
            InitializeComponent();
      }
      void ButtonGo_Click(object sender, RoutedEventArgs e)
      {
            if (webView != null && webView.CoreWebView2 != null)
            {
               webView.CoreWebView2.Navigate(addressBar.Text);
            }
      }
   }
}

選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。
在地址列輸入新網址，選擇 「開始」。例如，輸入 https://www.bing.com。
請確保 WebView2 控制項開啟的是你輸入的網址。

請務必在地址欄輸入完整的網址。如果網址不是以 http:// or https://開頭，應用程式會產生。ArgumentException

範例應用程式在地址列中顯示 Bing 網站及網址 https://www.bing.com ：

在網頁導覽時，WebView2 控制項會引發事件。承載 WebView2 的應用程式會監聽以下事件：

NavigationStarting
SourceChanged
ContentLoading
HistoryChanged
NavigationCompleted

導航事件，從新文件到導航啟動，再到導航完成

上圖顯示事件序列。導航事件會從新文件開始。

成功之路

成功的路徑包含完整的事件序列：

導航啟動。
來源已更改，可能來自同一份文件。
內容載入中。
歷史會改變。
導航完成。

欲了解更多資訊，請參閱 WebView2 應用程式的導航事件。

故障路徑

若發生故障，故障路徑會直接從導航開始到導航完成，跳過中間的事件。

當錯誤發生時，會觸發以下事件，並可能依賴導覽至錯誤網頁：

SourceChanged
ContentLoading
HistoryChanged

重新導向

如果發生 HTTP 重定向，會連續出現多個 NavigationStarting 事件。

為了示範如何使用事件，請註冊一個處理程序，該處理器 NavigationStarting 會取消所有非 HTTPS 請求，如下所示。

在檔案中 MainWindow.xaml.cs 修改建構子，使其與以下程式碼的頂端相符。在建構子下方，加入函數：EnsureHttps

public MainWindow()
{
    InitializeComponent();
    webView.NavigationStarting += EnsureHttps;
}

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

在建構子中， EnsureHttps 被註冊為 WebView2 控制項事件 NavigationStarting 的事件處理程序。

選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。
嘗試開啟一個 HTTP 網站。確保 WebView2 控制項保持不變。
嘗試開啟 HTTPS 網站。 WebView2 控制功能允許你開啟 HTTPS 網站。

步驟 8 - 腳本編寫

你可以在執行時使用主機應用程式，將 JavaScript 程式碼注入 WebView2 控制項。你可以指派 WebView2 執行任意的 JavaScript 或新增初始化腳本。注入的 JavaScript 會應用於所有新的頂層文件及子框架，直到 JavaScript 被移除為止。

注入的 JavaScript 會以特定時間執行：

在建立全域物件後執行。
在執行 HTML 文件中其他腳本之前，先執行它。

例如，新增腳本，當使用者瀏覽非 HTTPS 網站時會發送警報，如下：

修改 EnsureHttps 函式，將一個腳本注入網頁內容，使用 ExecuteScriptAsync 方法。

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
   String uri = args.Uri;
   if (!uri.StartsWith("https://"))
   {
      webView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");
      args.Cancel = true;
   }
}

選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。
確保當你瀏覽不使用 HTTPS 的網站時，應用程式會顯示提醒。

步驟 9 - 主機與網頁內容之間的溝通

主機與網頁內容可透過 postMessage以下方式溝通：

WebView2 控制項中的網頁內容可透過 window.chrome.webview.postMessage向主機發布訊息。主機會使用主機上註冊 WebMessageReceived 的訊息來處理該訊息。
主機在 WebView2 控制項 CoreWebView2.PostWebMessageAsString 中，使用或 CoreWebView2.PostWebMessageAsJSON發佈訊息給網頁內容。訊息由加入的 window.chrome.webview.addEventListener處理器捕捉。

通訊機制利用原生功能將網頁內容的訊息傳遞給主機。

在您的專案中，當 WebView2 控制項導覽到 URL 時，會在 Address bar 顯示該 URL，並提醒使用者 WebView2 控制項中顯示的 URL。

在 MainWindow.xaml.cs中，更新你的建構子，並建立 InitializeAsync 一個函式以匹配以下程式碼。 InitializeAsync函式等待 EnsureCoreWebView2Async，因為的CoreWebView2初始化是非同步的。
```
public MainWindow()
{
   InitializeComponent();
   webView.NavigationStarting += EnsureHttps;
   InitializeAsync();
}

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
}
```

CoreWebView2 初始化後，註冊一個事件處理程式以回應 WebMessageReceived。在 MainWindow.xaml.cs中，使用以下程式碼更新 InitializeAsync 並加法 UpdateAddressBar ：

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;
}

void UpdateAddressBar(object sender, CoreWebView2WebMessageReceivedEventArgs args)
{
   String uri = args.TryGetWebMessageAsString();
   addressBar.Text = uri;
   webView.CoreWebView2.PostWebMessageAsString(uri);
}

為了讓 WebView2 控制項在初始化後傳送並回應網頁訊息 CoreWebView2 ，主機會執行以下操作：
1. 注入一個腳本到網頁內容，註冊一個處理器以從主機列印訊息。
2. 會注入一個腳本到網頁內容，將網址貼給主機。

在 MainWindow.xaml.cs中，更新 InitializeAsync 以符合以下程式碼：

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage(window.document.URL);");
   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener(\'message\', event => alert(event.data));");
}

選擇>「全部儲存檔案」以儲存專案。
按 F5 以組建及執行專案。
當你開啟新的 URI 時，WebView2 控制項會在地址列顯示該 URI。

範例應用程式會在地址列顯示 URI 及 Microsoft 網站： https://www.microsoft.com

恭喜你，你打造了第一個 WebView2 應用程式！

另請參閱

WebView2 API 參考
- WPF

developer.microsoft.com：

Microsoft Edge WebView2 - WebView2 功能的初步介紹，於 developer.microsoft.com 年。

地方頁面：

WPF 範例應用程式
管理使用者資料資料夾
WebView2 範例應用程式 - 倉庫指南 WebView2Samples 。
WebView2 應用程式的開發最佳實務

GitHub：

WebView2Samples repo > WebView2WpfBrowser

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27