共用方式為


WPF 範例應用程式

此範例 WebView2WpfBrowser 是一個 WPF .NET 應用程式,示範如何內嵌 WebView2 控制件並使用 WebView2 API 來實作網頁瀏覽器。

  • 範例名稱: WebView2WpfBrowser
  • 存放庫目錄: WebView2WpfBrowser
  • 方案檔: WebView2WpfBrowser.sln

此範例是建置為 WPF Visual Studio 2019 專案。 它會在 WebView2 環境中使用 C# 和 HTML/CSS/JavaScript。

此範例示範 WebView2 的事件處理程式和 API 方法的選取範圍,這些方法可讓 WPF 應用程式直接與 WebView 互動,反之亦然。

WebView2WpfBrowser 範例應用程式

WebView2WpfBrowser 範例應用程式具有下列功能表,其中包含許多有用的功能表項:

  • 檔案
  • View
  • 設定
  • 案例

如果這是您第一次使用 WebView2,建議您先遵循 使用者入門 教學課程,以瞭解如何建立 WebView2,並逐步解說一些基本的 WebView2 功能。 請參閱 開始在 WPF 應用程式中使用 WebView2

如需 WebView2 中事件和 API 處理程式的詳細資訊,請參閱 WebView2 API 參考

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

Microsoft需要 Visual Studio。 此範例不支援Microsoft Visual Studio Code。

  1. 如果尚未安裝具有 .NET 支援的 Visual Studio 2019 (最低必要版本) ,請在個別的視窗或索引卷標中,參閱在設定 WebView2 的開發環境安裝 Visual Studio。 請依照該節中的步驟安裝具有 .NET 支援的Visual Studio 2019,然後返回此頁面並繼續執行下列步驟。

步驟 2 - 複製或下載 WebView2Samples 存放庫

  1. 如果尚未完成,請將存放庫複製或下載 WebView2Samples 到本機磁碟驅動器。 在個別的視窗或索引標籤中,請參閱為 WebView2 設定開發環境中的下載 WebView2Samples 存放庫。 請遵循該區段中的步驟,然後返回此頁面,然後繼續進行下列步驟。

步驟 3 - 在 Visual Studio 中開啟解決方案

  1. 在本機磁碟驅動器上 .sln ,在 Visual Studio 的 目錄中開啟 檔案:

    • <your-repos-directory>/WebView2Samples/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

    或:

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.sln

步驟 4 - 出現提示時安裝工作負載

  1. 如果出現提示,請安裝任何要求的Visual Studio工作負載。 在個別的視窗或索引標籤中,請參閱為 WebView2 設定開發環境中的安裝 Visual Studio 工作負載。 請遵循該區段中的步驟,然後返回此頁面,然後繼續進行下列步驟。

    WebView2WpfBrowser 專案會在 Visual Studio 中開啟:

    Visual Studio 中的 WebView2WpfBrowser 專案

步驟 5 - 建置並執行專案

在 Visual Studio 頂端設定建置目標,如下所示:

  1. 在 [ 方案組態] 下拉式清單中,選取 [ 偵錯] 或 [ 發行]

  2. 在 [ 解決方案平臺] 下拉式清單中,選取 [ 任何 CPU]

  3. 方案總管 中,以滑鼠右鍵按兩下 WebView2WpfBrowser 專案,然後選取 [建置]

    這會建置項目檔 WebView2WpfBrowser.csproj

  4. 在 Visual Studio 中,選取 [ 偵錯>開始偵 錯] (F5) 。

    範例應用程式視窗隨即開啟:

    WebView2WpfBrowser 範例應用程式

  5. 在 Visual Studio 中,選取 [ 偵錯>停止偵錯]。 Visual Studio 會關閉應用程式。

步驟 6 - 更新 WebView2 SDK

  1. 將項目節點上的發行前版本 WebView2 SDK 更新 (方案總管 中的方案節點) 。 安裝 WebView2 SDK 的最新發行前版本,讓您可以嘗試最新的功能。 在個別的視窗或索引標籤中,請參閱為 WebView2 設定開發環境中的安裝或更新 WebView2 SDK。 請遵循該區段中的步驟,然後返回此頁面,然後繼續進行下列步驟。

  2. 再次建置並執行專案。

步驟 7 - 探索功能表並檢查程式代碼

  1. 探索 WebView2WpfBrowser 範例應用程式的功能表,其中包含許多實用的功能表:

    • 檔案
    • View
    • 設定
    • 案例
  2. 在 Visual Studio 程式代碼編輯器中,檢查程式代碼:

    Visual Studio 中的 WebView2WpfBrowser 專案的程式代碼

另請參閱