May 9, 2018 10:06 am

Bringing a modern WebView to your .NET WinForms and WPF Apps

One of the founding principles of Microsoft Edge is that it is evergreen, with automatic updates to Windows 10 continually refreshing both Microsoft Edge itself and web content throughout Windows 10. However, until recently, WinForms and WPF apps didn’t have access to the Microsoft Edge-powered WebView.

Earlier this week at Build 2018, Kevin Gallo previewed a new WebView for Windows 10, bringing the latest Microsoft Edge rendering engine to .NET WinForms and WPF apps for the first time in an upcoming release of Windows 10. In today’s post, we’ll provide more details on the benefits this brings to developers, and how you can preview this new capability in the Windows 10 April 2018 Update.

A WebView for the modern web

In our recent blog post on Progressive Web Apps (PWAs), we described the powerful experiences enabled by bringing a modern web platform to UWP, allowing developers to write HTML, CSS, and JS that seamlessly spans both browser as well as native app experiences.

As the growth of the web platform in general, and EdgeHTML in particular, have accelerated in recent releases, this has resulted in an increased performance and compatibility gap with the Trident-powered WebBrowser control, and many of our customers have asked for a way to incorporate the latest version of EdgeHTML into WinForms and WPF apps. We’re happy to address this feedback with a preview of the all-new EdgeHTML-powered WebView, bringing the last three years of performance, reliability, and security enhancements to WinForms and WPF apps for the first time.

Getting started

Working with the WebViewControl and WebView API may feel foreign to native .NET developers, so we’re building additional controls to simplify the experience and provide a more familiar environment. These controls wrap the WebViewControl to enable the control to feel more like a native .NET WinForms or WPF control, and provide a subset of the members from that class.

The WinForms and WPF controls are available today as a preview in the 3.0 release of the Windows Community Toolkit in the Microsoft.Toolkit.Win32.UI.Controls package. This means that upgrading from the Trident-powered WebBrowser control to the EdgeHTML-powered WebView in your WinForms or WPF app can be as easy as dragging in a new control from the toolbox.

Using WebView for WPF

Once you install the NuGet package, the WebView control appears in Windows Community Toolkit section of the Toolbox when the WPF Designer is open in Visual Studio or Blend.

Using the Designer

Drag the control from the Toolbox as you would any other control.

Programmatically adding WebView

The WPF version of the control is in the Microsoft.Toolkit.Win32.UI.Controls.WPF namespace.

Using WebView for WinForms

Using the Designer

First, we’ll need to add a WinForms control from a NuGet package to the Toolbox in Visual Studio. In a future release, Visual Studio will do this automatically.

  • First, open the Visual Studio Toolbox, then right-click anywhere in the toolbox, and select the Choose Items
  • In the .NET Framework Components tab of the Choose Toolbox Items dialog box, click the Browse button to locate the Toolkit.Win32.UI.Controls.dll in your NuGet package folder.
    For help finding that folder, see Managing the global packages, cache, and temp folders.
  • After the DLL is added to the list of Toolbox controls, WebView is automatically
  • Close the Choose Toolbox Items dialog box.

The WebView control appears in the All Windows Forms section of the Toolbox when the Windows Forms Designer is open.

Programmatically adding WebView

After installing the NuGet package, you can add the WebView to your application like any other control. The WinForms version of the control is in the Microsoft.Toolkit.Win32.UI.Controls.WinForms namespace.

We’re just getting started!

The current WinForms and WPF WebView implementations are an early preview, with some limitations when compared to the UWP WebView control. For the complete list of these limitations, see Known Issues of the WebView control for Windows Forms and WPF applications on GitHub.

You can get started with WebView today using the Windows 10 April 2018 update or the latest Windows Insider Preview builds, where we’ll be adding more improvements as we continue towards a stable release. Please share your feedback or suggestions via @MSEdgeDev on Twitter, in the Windows Community Toolkit project on GitHub, or in the comments below.

Happy Coding!

Kirupa Chinnathambi, Senior Program Manager, Microsoft Edge
Richard Murillo, Principal Architect, Microsoft Edge

Join the conversation

    • It is called Microsoft.Toolkit.Win32.UI.Controls
      If using NuGet in Visual Studio, you need to check the “Include prerelease” checkbox next to the search field.

      The part I’m working on is figuring out which version of .NET this works with. Not with 4.5 or 4.6, apparently.

      • Seconded. I didn’t need to tick ‘Include prerelease’ to find it, but it refuses to install for .Net 4.6. Show-stopper. Message in full:

        > Could not install package ‘Microsoft.Toolkit.Win32.UI.Controls 3.0.0’. You are trying to install this package into a project that targets ‘.NETFramework,Version=v4.6.1’, but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.

          • We need 4.6.2 because it contains DPI awareness. Without it the hit targets don’t line up with running at >100% DPI, making the app unusable. We’re working on improving DPI support in an upcoming release where we can relax this restriction.

  1. Great, but we have a C++ Win32 application, that uses the old IEControl…. there is hope or the UWP Islands are only for .Net ?

  2. Hey Microsoft Team

    I’m proud to say that I am a new convert from Google Chrome and Google Search engine to Windows Edge and Bing respectively. This is not to say that I won’t be going back once in a while but I really love Edge and Bing.

    I LOVE THE SPEED. Edge really leaves Chrome in the dust when it comes to raw performance.

    I also love the NOTES feature. This is a beautiful addition.

    But here are my complaints.

    1- Edge does not allow me to search a keyword using Right Click-> Select-> directly from the window. I am forced to copy the text and then paste it in another tab.

    This is a simple fix which Windows team can include in my next upgrade. I am looking forward to this.

    2- I cannot use Boolean operators successfully with Bing search.

    I need operators such as “KEYWORD” and KEYWORD – WEBSITE URL.COM. I use them frequently to specifically focus on target keywords or omitting a specific website from my search results.

    3- YouTube is abysmally slow on Microsoft Edge.

    I am feeling really happy to be back in Windows ecosystem after 2006 when I started using Chrome for the first time.

    Kudos. Excellent work, Microsoft team. Keep it up.

  3. So, WebView with Winforms will work only on Win10, or is there a chance of working on older OS like 7?

  4. Hi, this is great news! We are currently developing a WPF app that hosts an embedded WebServer, and uses the WebBrowser Control (IE) to access a web app hosted by that web server. We are looking forward to replace the IE control with an Edge control or alternative browser.

    However, using the WebViewControl in a WPF app, I noticed a few issues:

    – When resizing the WPF window and the WebViewControl, its contents will disappear and turn gray.
    – I cannot access localhost URLs. In our application, we use an embedded WebServer and use the WebBrowser control (IE) to access http://localhost:8181/
    – It seems the WebViewControl cannot handle downloads initiated by the web page. While in that case the UnviewableContentIdentified event is raised, it contains only the URL and media type but no access e.g. to the raw response stream.

    In our case, we are hosting a webapp locally that can generate a download in response to a HTTP POST request, or generating an element to a Data URL with the “download” attribute (non-IE Browsers), or using “msSaveOrOpenBlob” (for IE/Edge), so I cannot simply take the URL to restart the download.

    Will the WebViewControl be able to handle downloads initiated by the web app in a future version? Thanks!

    • Thanks for your feedback.
      – On resizing, there are a couple of bugs you might be running into. Try the updated Toolkit and/or an updated OS (e.g. Insiders build) if possible. We’ve made a bunch of fixes for common scenarios, but we might have missed some.
      – Localhost support is available. Be sure to set the `IsPrivateNetworkClientServerCapabilityEnabled` property to TRUE
      – For downloads: this unfortunately is a limitation.

      If possible, could you head over to GitHub and submit an issue?

  5. Is this new view intended to be a logical equivalent to “Chrome Custom Tab” on Android and/or ASWebAuthenticationSession on iOS12? I’m trying to determine how to make a cohesive authentication strategy between UWP progressive web apps, regular web apps, and existing WinForm apps that isn’t jarring to the user (in other words, leaves around stray browser windows…) Right now, I pretty much have to deal with mechanisms as layed out in RFC 8252 (using URI redirection for passing messages between the system browsers and native apps). It would be a whole lot easier if Microsoft would simply implement a Chrome Custom Tab equivalent that provides the ability to invoke a browser window that 1) shares state (cookies) with Edge and 2) is sandboxed from the app and 3) is pared down to a minimal UI that allows for the window to be dismissed.

  6. Kirupa, Richard: Is WebView available in Windows 10 IoT Enterprise LTSB 2016 without Edge? Thank you.

  7. Hi,
    I’ve been searching around for days, but can’t find much information at all. How do I clear cookies/session data for a webview? It seems to be independent of the other browsers on the system, which is good, but can’t, for the life of me, work out where it is storing the cookies, or how to clear them. I need to be able to clear authorisation cookies, each time I run my application. Can anyone please help? I’ve tried InternetSetOption etc, but it just seems to affect my browsers rather than the content inside the webview. If anyone has any ideas, please let me know.