Wpf Webbrowser Edge

Posted on by



Download source code - 35.4 KB; Introduction. The WPF WebBrowser control is extremely sad in the capabilities it provides, and even in supporting the MVVM pattern.I created a control to enhance the capabilities of the WebBrower to support easy interface using ICommand for forward and back buttons, and the MVVM design pattern. 'The Microsoft Edge WebView2 control enables you to embed web technologies (HTML.) in native applications. It uses Microsoft Edge (Chromium) as the rendering engine to display web content.' See here for the pitch for a hybrid native/web app approach. In the past, I made a variant of my ImageWallViewer for displaying Gifs. This is a VB.NET class which updates WebBrowser control to use the latest version of the installed browser (Internet Explorer, Edge). If you need to load a webpage in your VB.NET WinForm or WPF app you have to use a WebBrowser control. The WebBrowser Control is - by default - stuck in IE 7 rendering mode.

  1. Wpf Webbrowser Control Use Edge
  2. Wpf Webbrowser Edge Pro
  3. Wpf Edge Browser Control
-->

In this article, get started creating your first WebView2 app and learn about the main features of WebView2. For more information on individual APIs, navigate to API reference.

Prerequisites

Ensure you install the following list of pre-requisites before proceeding.

  • WebView2 Runtime or any Microsoft Edge (Chromium) non-stable channel installed on supported OS (currently Windows 10, Windows 8.1, and Windows 7).
  • Visual Studio 2017 or later.

Step 1 - Create a single-window app

Start with a basic desktop project that contains a single main window.

  1. In Visual Studio, choose WPF .NET Core App (or WPF .NET Framework App) > Next.

  2. Enter values for Project name and Location. Choose .NET Framework 4.6.2 or later (or .NET Core 3.0 or later).

  3. To create your project, choose Create.

Step 2 - Install WebView2 SDK

Use NuGet to add the WebView2 SDK to the project.

  1. Hover on the projecty, open the contextual menu (right-click), and choose Manage NuGet Packages....

    Manage NuGet packages

  2. In the search bar, type Microsoft.Web.WebView2 > choose Microsoft.Web.WebView2.

    Ready to start developing apps using the WebView2 API. To build and run the project, select F5. The running project displays an empty window.

Step 3 - Create a single WebView

Next add a WebView to your app.

Wpf Webbrowser Control Use Edge

  1. In the MainWindow.xaml file, to add the WebView2 XAML namespace, insert the following line inside the <Window/> tag.

    Ensure the code in MainWindow.xaml looks like the following code snippet.

  2. To add the WebView2 control, replace the <Grid> tags with the following code snippet. The Source property sets the initial URI displayed in the WebView2 control.

  3. To build and run the project, select F5 Ensure your WebView2 control displays https://www.microsoft.com.

Step 4 - Navigation

Add the ability to allow users to change the URL that the WebView2 control displays by adding an address bar to the app.

  1. In the MainWindow.xaml file, add an address bar by copying and pasting the following code snippet inside the <DockPanel> that contains the WebView.

    Ensure the <DockPanel> section of the MainWindow.xaml file matches the following code snippet.

  2. In Visual Studio, in the MainWindow.xaml.cs file, to add the CoreWebView2 namespace, insert the following code snippet at the top.

  3. In the MainWindow.xaml.csfile, copy the following code snippet to create the ButtonGo_Click method, which navigates the WebView to the URL entered in the address bar.

    To build and run the project, select F5. Type a new URL in the address bar and choose Go. For example, type https://www.bing.com. Ensure the WebView2 control navigates to the URL.

    Note

    Make sure a complete URL is entered in the address bar. An ArgumentException is thrown if the URL does not start with http:// or https://.

Step 5 - Navigation events

During webpage navigation, the WebView2 control raises events. The app that hosts WebView2 controls listens for the following events.

  • NavigationStarting
  • SourceChanged
  • ContentLoading
  • HistoryChanged
  • NavigationCompleted

For more information, navigate to Navigation Events.

Navigation events

When an error occurs, the following events are raised and may depend on navigation to an error webpage.

  • SourceChanged
  • ContentLoading
  • HistoryChanged

Note

If an HTTP redirect occurs, there are multiple NavigationStarting events in a row.

To demonstrate how to use the events, register a handler for NavigationStarting that cancels any non-HTTPS requests.

In the MainWindow.xaml.cs file, modify the constructor to match the following code snippet and add the EnsureHttps function.

In the constructor, EnsureHttps is registered as the event handler on the NavigationStarting event on the WebView2 control.

To build and run the project, select F5. Ensure when navigating to an HTTP site, the WebView remains unchanged. However, the WebView navigates to HTTPS sites.

Step 6 - Scripting

You may use host apps to inject JavaScript code into WebView2 controls at runtime. You may task WebView to run arbitrary JavaScript or add initialization scripts. The injected JavaScript applies to all new top-level documents and any child frames until the JavaScript is removed. The injected JavaScript is run with specific timing.

  • Run it after the creation of the global object.
  • Run it before any other script included in the HTML document is run.

As an example, add scripts that send an alert when a user navigates to non-HTTPS sites. Modify the EnsureHttps function to inject a script into the web content that uses ExecuteScriptAsync method.

To build and run the project, select F5. Ensure the app displays an alert when you navigate to a website that doesn't use HTTPS.

Step 7 - Communication between host and web content

The host and web content may communicate in the following ways using postMessage.

  • Web content in a WebView2 control may post a message to the host using window.chrome.webview.postMessage. The host handles the message using any registered WebMessageReceived on the host.
  • Hosts post messages to web content in a WebView2 control using CoreWebView2.PostWebMessageAsString or CoreWebView2.PostWebMessageAsJSON. The messages are caught by handlers added to window.chrome.webview.addEventListener.

The communication mechanism passes messages from web content to the host using native capabilities.

In your project, when the WebView2 control navigates to a URL, it displays the URL in the address bar and alerts the user of the URL displayed in the WebView2 control.

  1. In the MainWindow.xaml.cs file, update your constructor and create an InitializeAsync function to match the following code snippet. The InitializeAsync function awaits EnsureCoreWebView2Async because the initialization of CoreWebView2 is asynchronous.

  2. After CoreWebView2 is initialized, register an event handler to respond to WebMessageReceived. In MainWindow.xaml.cs, update InitializeAsync and add UpdateAddressBar using the following code snippet.

  3. In order for the WebView to send and respond to the web message, after CoreWebView2 is initialized, the host:

    1. Injects a script to the web content that registers a handler to print message from the host.
    2. Injects a script to the web content that posts the URL to the host.

    In the MainWindow.xaml.cs file, update InitializeAsync to match the following code snippet.

    To build and run the app, select F5. Now, the address bar displays the URI in the WebView2 control. When you successfully navigate to a new URI, the WebView2 control alerts the user of the URI that's displayed in the WebView2 control.

    addressBar

Congratulations, you built your first WebView2 app.

Next steps

To continue learning more about WebView2, navigate to the following resources.

See also

  • For a comprehensive example of WebView2 capabilities, navigate to WebView2Samples repo on GitHub.
  • For more detailed information about WebView2 API, navigate to API reference.
  • For more information about WebView2, navigate to WebView2 Resources.

Getting in touch with the Microsoft Edge WebView team

Share your feedback to help build richer WebView2 experiences. To submit feature requests or bugs, or search for known issues, navigate to the Microsoft Edge WebView feedback repo.

-->

The Microsoft Edge WebView2 control enables you to embed web technologies (HTML, CSS, and JavaScript) in your native apps. The WebView2 control uses Microsoft Edge (Chromium) as the rendering engine to display the web content in native apps. With WebView2, you may embed web code in different parts of your native app. Build all of the native app within a single WebView instance. For information on how to start building a WebView2 app, navigate to Get Started.

Web

Hybrid app approach

Developers must often decide between building a web app or a native app. The decision hinges on the trade-off between reach and power. Web apps allow for a broad reach. As a Web developer, you may reuse most of your code across different platforms. To access the all capabilities of a native platform, use a native app.

Hybrid apps allow developers to enjoy the best of both worlds. Hybrid app developers benefit from the following advantages.

  • The ubiquity and strength of the web platform.
  • The power and full capabilities of the native platform.

WebView2 benefits


Web ecosystem & skillset
Utilize the entire web platform, libraries, tooling, and talent that exists within the web ecosystem.


Rapid innovation
Web development allows for faster deployment and iteration.


Windows 7, 8, and 10 support
Support for a consistent user experience across Windows 7, Windows 8, and Windows 10.

Wpf Webbrowser Edge Pro


Native capabilities
Access the full set of Native APIs.


Code-sharing
Add web code to your codebase allows for increased reuse across multiple platforms.


Microsoft support
Microsoft provides support and adds new feature requests when WebView2 releases at Generally Availability (GA).


Evergreen distribution
Rely on an up-to-date version of Chromium with regular platform updates and security patches.


Fixed
(coming soon) Choose to package the Chromium bits in your app.


Incremental adoption
Add web components piece by piece to your app.

Getting started

To build and test your app using the WebView2 control, you need to have the WebView2 SDK installed. Select one of the following options to get started.

The WebView2 Samples repository contains samples that demonstrate all of the WebView2 SDK features and API usage patterns. As more features are added to the WebView2 SDK, the sample apps will be updated.

Supported platforms

A General Availability (GA) or Preview version is available on the following programming environments.

  • Win32 C/C++ (GA)
  • .NET Framework 4.6.2 or later
  • .NET Core 3.1 or later
  • .NET 5
  • WinUI 3.0 (Preview)

You may run WebView2 apps on the following versions of Windows.

  • Windows 10
  • Windows 8.1
  • Windows 7 **
  • Windows Server 2019
  • Windows Server 2016
  • Windows Server 2012
  • Windows Server 2012 R2
  • Windows Server 2008 R2 **

Important

** WebView2 support for Windows 7 and Windows Server 2008 R2 has the same support cycle as Microsoft Edge. For more information, navigate to Microsoft Edge supported Operating Systems.

Next steps

For more information on how to build and deploy WebView2 apps, review the conceptual documentation and how-to guides.

Concepts

Wpf Edge Browser Control

How-To guides

Getting in touch with the Microsoft Edge WebView team

Share your feedback to help build richer WebView2 experiences. To submit feature requests or bugs, or search for known issues, navigate to the Microsoft Edge WebView feedback repo.