DOCSEARCHbyAlgolia
Submit Docs

Microsoft Edge WebView2 Samples

repository·main·Indexed 21 days ago

https://github.com/microsoftedge/webview2samples

A collection of sample projects for Microsoft Edge WebView2, including 'Hello World' tutorials, deployment demonstrations, and framework-specific applications for Win32 (C++), WinForms, WPF, WinUI 2 (UWP), and WinUI 3 (Windows App SDK). The repository features advanced samples for the Chrome DevTools Protocol (CDP) extension, fixed-version runtime configuration, and solving WPF Airspace issues using WebView2CompositionControl.

Tokens
12.3K
Snippets
8
Records
76
Agent score
76%

What's inside microsoftedge-webview2samples

  1. Overview of WebView2SampleWinComp

    main

    The WebView2SampleWinComp sample demonstrates how to embed a WebView2 control within a native Win32 application using Windows Runtime Composition APIs (the Visual layer). This approach allows C++ Win32 applications to leverage modern Windows 10 UI features for improved look, feel, and functionality.

    Key Technologies:

    • Host Application: C++ Win32 (Visual Studio 2019 project).
    • WebView2 Content: HTML, CSS, and JavaScript.
    • UI Integration: Windows Runtime Composition APIs (Visual layer).

  2. Explore WebView2 deployment samples

    main
    The SampleApps directory includes deployment samples designed to demonstrate different methods for deploying the WebView2 Runtime. These samples help developers understand how to manage the runtime environment for their users. For more detailed information, refer to the official Microsoft deployment samples documentation.

  3. Explore WebView2 sample apps for various frameworks

    main
    The SampleApps directory contains WebView2 sample applications organized as Visual Studio projects. These samples cover various frameworks and platforms to demonstrate different ways to integrate WebView2 into your applications. For a comprehensive list and detailed documentation, refer to the official Microsoft documentation.

  4. Explore WebView2 Samples

    main

    The webview2samples repository provides several categories of projects to help you learn and implement WebView2 in your applications:

    • Getting Started tutorial projects: Completed Visual Studio projects that correspond to the steps in the official Getting Started tutorials. These serve as basic 'Hello World' style applications.
    • Sample apps: Visual Studio projects for various frameworks and platforms. These are more advanced, featuring menus and demonstrating a wide range of WebView2 APIs.
    • Deployment samples: Projects specifically designed to demonstrate how to deploy the WebView2 Runtime.

  5. Use the WebView2 CDP Extension in WPF apps

    main

    The WV2CDPExtensionWPFSample demonstrates how to use the WebView2 CDP (Chrome DevTools Protocol) Extension within a WPF application. This sample specifically shows how to invoke CDP methods using a DevToolsProtocolHelper object provided by the WebView2 environment.

    Key characteristics of this sample:

    • Framework: WPF (Windows Presentation Foundation)
    • Language: C#
    • Core Functionality: Calling Chrome DevTools Protocol (CDP) methods via DevToolsProtocolHelper.

  6. Verify Visual Hosting Functionality

    main

    Visual hosting (e.g., using Visual - DComp) allows the WebView2 content to be hosted as a visual rather than a standard HWND window. When testing Visual Hosting, ensure that:

    • Focus correctly moves to text elements (e.g., changing the cursor to an I-beam).
    • Input (typing) works correctly within the hosted visual.
    • System overlays, such as the Windows Emoji picker (Windows + .), appear correctly positioned relative to the insertion caret within the visual.
    • The visual content moves correctly when the parent window is dragged to a new location on the screen.

  7. Use WebView2CompositionControl to solve WPF Airspace issues

    main

    The WebView2CompositionControl is a specialized control designed for .NET Core 3.0 and .NET 8 WPF applications. It is used as a stand-in replacement for the regular WPF WebView2 control to solve the "Airspace" issue.

    In standard WPF WebView2 implementations, all WPF content (like overlays or menus) is rendered behind the WebView2 control. WebView2CompositionControl resolves this by using a D3D11 graphics capture session, allowing WebView2 content to be displayed and interacted with as part of the regular WPF composition layer, enabling WPF elements to appear on top of the web content.

  8. Test browser process resilience and error handling

    main

    The sample includes tests for handling browser process failures:

    • Crash Browser Process: Simulates an unexpected exit of the browser process. The app should prompt to Recreate webview?. Selecting Yes re-renders the content; selecting No leaves the content blank.
    • Unresponsive Browser Process: Simulates a hung renderer process (e.g., by navigating to edge://hang). The app should prompt to Recreate webview? to reset the state.

  9. Test Focus Management and Tab Handling

    main

    Focus Control

    • Set Focus: Use View -> Set Focus to return focus to the last active element within the WebView (e.g., a specific button).
    • Tab In: Use View -> Tab In to move focus to the first active element in the WebView.
    • Reverse Tab In: Use View -> Reverse Tab In to move focus to the last active element in the WebView.

    Tab Handling by Host App

    By default, tab handling is managed by the host. You can test toggling this behavior:

    1. Use View -> Toggle Tab Handling to enable/disable host-app tab management.
    2. When enabled, a message box confirms: Tab handling by host app is now enabled.
    3. Test traversal using Tab and Shift+Tab to ensure focus moves correctly between the host app UI (like the address bar) and WebView elements.

  10. Set up the HoloLens 2 WebView2 Unity sample

    main

    To use the HoloLens2_GettingStarted sample, you must first clone the repository and then use the Microsoft Mixed Reality Feature Tool to restore the necessary Unity packages (Mixed Reality Toolkit and the WebView2 plugin package). After restoring features, you can open the project in Unity and load the SampleScene located in Assets/Scenes to test the application.

    IMPORTANT

    Support for WebView2 on HoloLens is discontinued. There are no bug fixes, content updates, or technical support, and functionality is not guaranteed for the long term.

    # Setup Steps

1. Clone this repository
2. Launch the Microsoft Mixed Reality Feature Tool
    - Click **Start**
    - Click the **...** button, navigate to the `HoloLens2GetStartedApp` folder, and select **Open**
    - With the project path selected, click **Restore Features** to load the required packages for the Mixed Reality Toolkit and the WebView2 plugin package.
3. Close the Mixed Reality Feature Tool
4. Launch Unity Hub
5. In Unity Hub, click **Open**, navigate to the `HoloLens2GetStartedApp` folder, and select **Open**.
6. In the Unity Editor, find the SampleScene in the `Assets/Scenes` folder and double-click to load it.
7. Click the play button in the Unity Editor to quickly test the app.

  12. Use the WinUI 2 (UWP) WebView2 Getting Started sample

    main
    The WinUI2_GettingStarted sample is a completed Visual Studio project designed to demonstrate how to integrate WebView2 into a WinUI 2 (UWP) application. It serves as the final result of the official Microsoft tutorial: Get started with WebView2 in WinUI 2 (UWP) apps. Use this project to understand the boilerplate, configuration, and implementation steps required for WebView2 in a UWP environment.