Skip to content

webview2wpfbrowser.md

Latest commit

 

History

History
125 lines (70 loc) · 6.45 KB

webview2wpfbrowser.md

File metadata and controls

125 lines (70 loc) · 6.45 KB
title WPF sample app
description This WebView2 sample demonstrates how to use the WebView2 control and WebView2 APIs to implement a web browser in a WPF .NET app.
author MSEdgeTeam
ms.author msedgedevrel
ms.topic conceptual
ms.prod microsoft-edge
ms.technology webview
ms.date 04/27/2022

WPF sample app

This sample, WebView2WpfBrowser, is a WPF .NET app that demonstrates how to embed the WebView2 control and use WebView2 APIs to implement a web browser.

  • Sample name: WebView2WpfBrowser
  • Repo directory: WebView2WpfBrowser
  • Solution file: WebView2WpfBrowser.sln

This sample is built as a WPF Visual Studio 2019 project. It uses C# and HTML/CSS/JavaScript in the WebView2 environment.

The API Sample showcases a selection of WebView2's event handlers and API methods that allow a WPF application to directly interact with a WebView and vice versa.

If this is your first time using WebView2, we recommend first following the Getting Started tutorial, which goes over how to create a WebView2 and walks through some basic WebView2 functionality. See Get started with WebView2 in WPF apps.

For more information about events and API Handlers in WebView2, see WebView2 API Reference.

See also README file for WebView2WpfBrowser.

Step 1 - Install Visual Studio

Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample.

  1. If Visual Studio (minimum required version) is not already installed, in a separate window or tab, see Install Visual Studio in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue the steps below.

Step 2 - Install a preview channel of Microsoft Edge

1.If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not already installed, in a separate window or tab, see Install a preview channel of Microsoft Edge in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue the steps below.

Step 3 - Clone or download the WebView2Samples repo

  1. If not done already, clone or download the WebView2Sample repo to your local drive. In a separate window or tab, see Download the WebView2Samples repo in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

Step 4 - Open the solution in Visual Studio

  1. On your local drive, open the .sln file in Visual Studio, in the directory:

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

    or:

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

Step 5 - Install workloads if prompted

  1. If prompted, install any Visual Studio workloads that are requested. In a separate window or tab, see Install Visual Studio workloads in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

    The WebView2WpfBrowser project opens in Visual Studio:

    The WebView2WpfBrowser project in Visual Studio

    To zoom, right-click > Open image in new tab.

Step 6 - Build and run the project

At the top of Visual Studio, set the build target, as follows:

  1. In the Solution Configurations dropdown list, select Debug or Release.

  2. In the Solution Platforms dropdown list, select Any CPU.

  3. In Solution Explorer, right-click the WebView2WpfBrowser project, and then select Build.

    This builds the project file WebView2WpfBrowser.csproj.

  4. In Visual Studio, select Debug > Start Debugging (F5).

    The sample app window opens:

    The WebView2WpfBrowser sample app

  5. Use the sample app; see README file for WebView2WpfBrowser.

  6. In Visual Studio, select Debug > Stop Debugging. Visual Studio closes the app.

Step 7 - Update or install the WebView2 SDK

  1. Update or install the WebView2 SDK on the project node (not the solution node) in Solution Explorer. In a separate window or tab, see Install the WebView2 SDK in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

  2. Build and run the project again.

Step 8 - Inspect the code

  1. In the Visual Studio code editor, inspect the code:

    WebView2WpfBrowser project's code in Visual Studio

    To zoom, right-click > Open image in new tab.

See also