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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <Window | |
| x:Class="WebViewTest.MainWindow" | |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | |
| xmlns:WPF="clr-namespace:Microsoft.Toolkit.Win32.UI.Controls.WPF;assembly=Microsoft.Toolkit.Win32.UI.Controls" | |
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | |
| xmlns:local="clr-namespace:WebViewTest" | |
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | |
| Title="MainWindow" | |
| Width="800" | |
| Height="450" | |
| mc:Ignorable="d"> | |
| <Grid> | |
| <WPF:WebView x:Name="wvc" /> | |
| </Grid> | |
| </Window> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public partial class MainWindow : Window | |
| { | |
| public MainWindow() | |
| { | |
| InitializeComponent(); | |
| // You can also use the Source property here or in the WPF designer | |
| wvc.Navigate(new Uri("https://www.microsoft.com")); | |
| } | |
| } |
Programmatically adding WebView
The WPF version of the control is in the Microsoft.Toolkit.Win32.UI.Controls.WPF namespace.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <Window | |
| x:Class="WebViewTest.MainWindow" | |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | |
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | |
| xmlns:local="clr-namespace:WebViewTest" | |
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | |
| Title="MainWindow" | |
| Width="800" | |
| Height="450" | |
| mc:Ignorable="d"> | |
| <Grid x:Name="Grid"/> | |
| </Window> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Microsoft.Toolkit.Win32.UI.Controls.WPF; | |
| public partial class MainWindow : Window | |
| { | |
| public MainWindow() | |
| { | |
| InitializeComponent(); | |
| // Initialize a WPF WebView and add it to the Window's Grid | |
| var wvc = new WebView(); | |
| Grid.Children.Add(wvc); | |
| wvc.Navigate(new Uri("https://www.microsoft.com")); | |
| } | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public partial class Form1 : Form | |
| { | |
| public Form1() | |
| { | |
| InitializeComponent(); | |
| // You can also use the Source property here or in the designer | |
| webView1.Navigate(new Uri("https://www.microsoft.com")); | |
| } | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Microsoft.Toolkit.Win32.UI.Controls.WinForms; | |
| public partial class Form1 : Form | |
| { | |
| public Form1() | |
| { | |
| InitializeComponent(); | |
| // Initialize WebView and add it to the Window's controls | |
| var wvc = new WebView(); | |
| ((ISupportInitialize)wvc).BeginInit(); | |
| wvc.Dock = DockStyle.Fill; | |
| Controls.Add(wvc); | |
| ((ISupportInitialize)wvc).EndInit(); | |
| // You can also use the Source property | |
| wvc.Navigate(new Uri("https://www.microsoft.com")); | |
| } | |
| } |
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
Source: Windows Blog
—