WinForms 範例應用程式

此範例 WebView2WindowsFormsBrowser 示範如何使用 WebView2 控制件和 WebView2 API 在 WinForms 應用程式中實作網頁瀏覽器。

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

WebView2WindowsFormsBrowser 應用程式視窗

  • [ 控件] 功能表有 [ 捷鍵] 和 [ 允許外部卸除] 的切換功能表項。
  • [ 檢視] 功能表具有 [ 縮放 ] 和 [ 背景色彩 ] 子功能表。
  • [ 事件] 按鈕會開啟 [EventMonitor] 視窗。

步驟 1 - 安裝 Visual Studio

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

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

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

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

步驟 3 - 在 Visual Studio 中開啟.sln

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

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

    或:

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

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

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

步驟 5 - 建置並執行專案

WebView2WindowsFormsBrowser 項目現在已在Visual Studio中開啟,方法是執行上述步驟。 在 Visual Studio 頂端設定建置目標,如下所示:

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

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

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

    這會建置項目檔 SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.vcxproj。 這可能需要幾分鐘的時間。

    如果您收到遺失 .NET Framework 4.6.2 開發人員套件的錯誤訊息,請遵循下列步驟。 否則,請跳至下一個主要區段。

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

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

    WebView2WindowsFormsBrowser 應用程式視窗

  5. 使用範例應用程式;請參閱 WebView2WindowsFormsBrowser 的自述檔

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

步驟 6 - 安裝 .NET Framework 4.6.2 開發人員套件

如果您建置 WebView2WindowsFormsBrowser 專案,並取得遺漏 .NET Framework 4.6.2 開發人員套件的錯誤訊息,請遵循下列步驟。 否則,請跳至下一個主要區段。

  1. 移至 [下載 .NET Framework],選取 v4.6.2,然後按兩下 [下載 .NET Framework 4.6.2 開發人員套件 ] 按鈕:

    下載 .NET Framework 4.6.2 開發人員套件

  2. 在 Microsoft Edge 中,選取 [ 設定] 和 [更多>下載>顯示在資料夾中 ] 圖示:

    下載 .NET Framework 開發人員套件

  3. 在資料夾中 Downloads ,按兩下檔案, 例如 ndp462-devpack-kb3151934-enu.exe

    [ Microsoft .NET Framework 開發人員套件 許可協定] 對話框隨即出現:

    [Microsoft .NET Framework 開發人員套件許可協定] 對話方塊

  4. 選取 [ 我同意授權條款和條件] 複選框,然後按兩下 [ 安裝 ] 按鈕。

    [ 用戶帳戶控制] 視窗隨即出現,詢問「您要允許此應用程式對您的裝置進行變更嗎?」

  5. 按兩下 [ 是] 按鈕。

    [Microsoft .NET Framework 開發人員套 件安裝成功 ] 對話框隨即出現:

    [Microsoft .NET Framework 開發人員套件的 [安裝成功] 對話框

  6. 按兩下 [ 關閉] 按鈕。

Microsoft .NET Framework 4.6.2 開發人員套件現在已安裝在您的電腦上。

步驟 7 - 更新或安裝 WebView2 SDK

  1. WebView2 SDK - 更新或安裝項目節點上的 WebView2 SDK (不是方案總管中) 的方案節點。 在個別的視窗或索引標籤中,請參閱為 WebView2 設定開發環境中的安裝或更新 WebView2 SDK。 請遵循該區段中的步驟,然後返回此頁面,然後繼續進行下列步驟。

    Visual Studio 中的 WebView2WindowsFormsBrowser 專案

步驟 8 - 建置並執行更新的專案

  1. 如果您剛才安裝上述 .NET Framework 4.6.2 開發人員套件,請關閉 Visual Studio,然後從 目錄再次開啟 Visual Studio 中的方案檔:

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

    或:

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

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

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

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

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

    這會建置項目檔 SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.vcxproj

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

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

    WebView2WindowsFormsBrowser 應用程式視窗

    • [ 控件] 功能表有 [ 捷鍵] 和 [ 允許外部卸除] 的切換功能表項。
    • [ 檢視] 功能表具有 [ 縮放 ] 和 [ 背景色彩 ] 子功能表。
    • [ 事件] 按鈕會開啟 [EventMonitor] 視窗。
  5. 在 Visual Studio 中,選取 [ 偵錯>停止偵錯]。 Visual Studio 會關閉應用程式。

步驟 9 - 檢查程序代碼

  1. 在 Visual Studio 程式代碼編輯器中,檢查程式代碼:

    Visual Studio 中的 WebView2WindowsFormsBrowser 專案

另請參閱