ASP.NET Core in .NET 6 Preview 3 brings many interesting features to explore, including the usage of Blazor components inside of desktop, WPF and Win Forms, applications via BlazorWebView control.
Hybrid apps are something that will be supported and emphasized with .NET 6. That will be accomplished using BlazorWebView. Support for building cross-platform hybrid desktop apps means you can write some of the UI parts of an app using web technologies while also leveraging native device capabilities of that platform and OS.
In .NET 6 Preview 3, BlazorWebView control is introduced for WPF and Windows Forms apps. Using BlazorWebView the developer is enabled to embed some of the Blazor functionality inside of the existing Windows desktop app which is based on the .NET 6. This hybrid approach allows the development team to combine existing WPF or Windows Forms desktop apps to modernize them and upgrade them with web-based parts using BlazorWebView embedding while keeping the core functionality and APIs of a desktop app.
In order to start using BlazorWebView controls, WebView2 Runtime needs to be installed.
The next steps to include Blazor functionality to an existing Windows Forms app are to update the Windows Forms app to target .NET 6 along with an update of the SDK used in the app’s project file to Microsoft.NET.Sdk.Razor.
With adding a package reference to Microsoft.AspNetCore.Components.WebView.WindowsForms the access to the WebView component is granted.
After adding the HTML and CSS files into wwwroot the Copy to Output Directory property of wwwroot needs to be set to Copy if newer.
Existing Blazor component can be rendered using BlazorWebView, with the following code snippet:
var serviceCollection = new ServiceCollection();
serviceCollection.AddBlazorWebView();
var blazor = new BlazorWebView()
{
Dock = DockStyle.Fill,
HostPage = "wwwroot/index.html",
Services = serviceCollection.BuildServiceProvider(),
};
blazor.RootComponents.Add<Counter>("#app");
Controls.Add(blazor);
The difference between adding BlazorWebView usage in the WPF app is with the reference to Microsoft.AspNetCore.Components.WebView.Wpf, and its usage in XAML control with set up the service provider as a static resource in the XAML code-behind.
<Window x:Class="WpfApp1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<blazor:BlazorWebView HostPage="wwwroot/index.html" Services="{StaticResource services}">
<blazor:BlazorWebView.RootComponents>
<blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
</blazor:BlazorWebView.RootComponents>
</blazor:BlazorWebView>
</Grid>
</Window>
var serviceCollection = new ServiceCollection();
serviceCollection.AddBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());
Issues with Razor component types not being visible in the project can be resolved by the usage of an empty partial class for the component.
Other noticeable updates and releases about ASP.NET Core updates in .NET 6 Preview 3 are: smaller SignalR, Blazor Server, and MessagePack scripts, how to enable Redis profiling session, HTTP/3 endpoint TLS configuration, .NET Hot Reload support, Razor compiler no longer produces a separate Views assembly, Shadow-copying in IIS, Vcpkg port for SignalR C++ client, reduced memory footprint for idle TLS connections, and remove slabs from the SlabMemoryPool.
For more on Blazor WebView and other releases, you can read the announcement written by Daniel Roth.
