Hybrid App Development With BlazorWebView — Blazor Lipstick For The Desktop Pig
Blazor is known all over town in .NET-based web development. When it comes to historically grown business applications, however, then there is no more fun in software development. Thanks to the BlazorWebView, the fun is only just beginning and hybrid software development with .NET is now also finding its way into the desktop classics Windows Forms and WPF. Well, does that really work out well? Let’s take a look!
Better for it than against — Why Windows Forms and WPF can’t be killed
If you’re on the internet, you might think that the software world is all about Android apps, fancy Macs and Microsoft’s Xbox, but most importantly web applications. But woe betide you look behind the scenes. Then little remains of the colorful web fairy tale world. From Windows XP to Windows 10, everything is in there — offline and without intranet access, of course. It’s no wonder that companies are sticking to their cherished Windows Forms desktop applications. In addition, there are a number of other good reasons to choose Windows Forms and WPF:
- Easy programming — partly with RAD Designer. A real turbo.
- Integration of legacy interfaces. If you need to develop software for a 20-year-old machine, you know what I’m talking about.
- Integration into legacy applications, e.B. via COM interface. Yes, seriously! Sometimes adverse circumstances mean that customers can’t even say goodbye to Delphi and ActiveX.
- Access to sensors and actuators. If you are active in industry, you can’t avoid S7, Modbus, IO-Link or ADS. Luckily, there are the right ones. NET libraries.
- Stability and investment security: The thing simply has to go through reliably over 10 years. There is no time for frills.
So you shouldn’t mess with Windows Forms and WPF if you want to develop a serious business application. Of course, this also applies to Blazor, .NET MAUI and Co. Because serious reasons to switch from Windows Forms or WPF completely to Blazor are often only from the point of view of the software developer. But not for the customer, who then has to pay for the fun.
When Ms. Blazor web app knocks on the back door
Already understood! Windows Forms and WPF are like a stubborn lama that just lies down when it doesn’t want to go any further. Maybe it will work out if you talk to him well with Blazor? That’s exactly what the BlazorWebView is for in software development. And there is good news. This is just a control from the .NET MAUI environment to embed a Blazor client web application using WebView2 in Windows Forms, WPF, or .NET MAUI apps.
What principle do you already know from Apache Cordova, Ionic and so on? Then take care.
Compared to its conspecifics from hybrid app development, the BlazorWebView is a sly old dog:
- Software development is done with Blazor/Razor components. The torture with JavaScript frameworks is largely spared.
- Despite Windows Forms, you can use modern patterns such as asynchronous programming.
- The. NET-Part runs where it belongs — in the . NET Runtime Environment
- Access to all . NET libraries that can be embedded in .NET 6 and up. This includes libraries that are compatible with .NET Standard. So also .NET 4.7.x.
- Much more performance than Blazor Wasm or Blazor Server in the browser. Logical!
.NET MAUI is not an island — cross-platform development with the BlazorWebView
The BlazorWebView actually comes from the .NET MAUI environment. Accordingly, Blazor can also be used to develop .NET MAUI apps for all possible target platforms:
- Windows 10 apps with WinUI 3 and beyond.
- Applications for Mac, iOS and other Apple devices
- And of course Android apps including smart watches and so on.
Not again! Xamarin Forms hasn’t been enough. This was already a milestone in terms of cross-platform software development. However, .NET MAUI beats this a good trick:
- Simplified project structure: Basically, a csproj project in the modern SDK style is sufficient.
- Unified Build Process and Platform: The world is a . NET platform, that also applies to MAUI. From Android to Windows, everything is regulated with .NET 6.
- Decoupling of UI and operating system: The controls are now also provided as Nuget packages and come in a unified Fluent design. Ugly special curls for Android or UWP styles and themes can be saved.
- Offline Operation: Sometimes there is no network access. That can expect you in an industry hall for example.
If you now combine the BlazorWebView with .NET MAUI, the result in cross-platform development is an Blazor jack of all trades that no longer knows any operating system limits. From a server-side web application to the mobile Android app, you can now develop every conceivable front end.
Stop babbling. Time for C# Code — A Small BlazorWebView Project for Windows Forms
Now let’s put our developer nose in the code. For this we develop a small .NET project using Windows Forms and the BlazorWebView. Before it really starts, however, a few small things and prerequisites should be done beforehand. To prevent the phenomenon “It doesn’t work on my computer!”, here are the tools I used:
- Installing .NET 6 (SDK 6.0.201)
- Installing Visual Studio 2022 (Preview)
- Installing WebView2
After that, the matter is short and painless.
1.) We simply start with a shabby Windows Forms project template. It then integrates the nuget package Microsoft.AspNetCore.Components.WebView.WindowsForms. Now you need a little adjustment to the SDKin the csprojfile. Don’t forget, we now have Blazor components on board. After all, we want to serve them all nicely with build tasks.
2.) So that not everything is in one big ball of .NET wool, we also create a separate Balzor project (Blazor WASM). Don’t forget! Everything should run later in the BlazorWebView. Therefore, a few adjustments in the wwwroot/index.html are necessary. In addition, the complete wwwroot folder must be integrated as content in the build process via *.csproj.
3.) Then drag and drop the BlazorWebView into the interface using the Windows Forms Editor. Don’t forget to place everything nicely in the middle with dock “Fill”.
4.) Now it takes a few more lines of code in the main form class (e.g. MainForm.cs) of the Windows Forms application that contains the WebView to initialize the ServiceCollection familiar from ASP.NET Core.
5.) If you want, you can still fine-tune the properties of the WebView. In this case, we prefer to add the folder for the user data beforehand. You never know where the admins will install the Blazor thing later. By the way, this will benefit us later in the distribution with the Microsoft Installer.
6.) Now it’s time to get started. With F5, the Blazor application is built and laughs at us with a fresh web interface.
You can find the full project and some other useful samples and snippets on GitHub:
- https://github.com/Devmawi/Blazor-Samples
- The original samples from GitHub: https://github.com/dotnet/maui/tree/main/src/BlazorWebView/samples
- A project that integrates the VLC media player into a Balzor Desktop App. But be carefully. This is only a snippet ;): https://github.com/Devmawi/BlazorWebView-Samples
What would a desktop app be without the good old MSI installer — Deploying a hybrid Blazor app
Now it’s time to get down to business. Of course, our Blazor app should not only make us as software developers happy, but also your end users. And of course, a real desktop application also includes the good old MSI installer. Let’s go and create a new setup project.
1.) First, we add a new Project of type Setup to our solution.
2.) Now we need to add the corresponding Project Output from our Windows Forms application. For this purpose, we select the publish items. Do they notice anything? The *.staticwebassets.runtime.json files are missing. Without them, the style sheets and the *.dll files will be nothing in the WebView2.
3.) Since WebView2 currently still wants to create a folder YOUR_PROJECT_NAME.exe.WebView2, it must be created in advance. Otherwise, there are write permissions issues if the application is not started by the administrator.
4.) Build now and the MSI installer is ready. The setup is done on the target computer in three simple steps:
- Install .NET 6 if it is not a self-contained deployment
- Installing WebView2
- Installation of the created installer
If you like it simpler and more modern, you can also distribute everything in an MSIX package. Fortunately, there are no problems.
Making legacy applications a little bit better with Blazor
What did we actually gain with Blazor and the BlazorWebView? Although it is only one control, a lot has come together:
- The possibility of all . NET libraries can also be used in the Blazor Web framework. You can continue to use your legacy program code in this way.
- Blazor not only brings modern concepts out of the . NET world. Even widely used web standards such as HTML, CSS and a little bit of JavaScript can be used. In particular, the software development of the UI becomes a bit more future-proof.
- And this without completely redeveloping the existing Windows Forms application.
If you have a . NET application based on Windows Forms or WPF, so the chances are not bad that you will make your application fit for the future with the BlazorWebView and enjoy it for a long time to come. Because with the BalzorWebView you can implement the transformation minimally invasively without ploughing the code of your application once transversely: From old to new, so to speak.
Not enough of Blazor? All sources to read
- Use the BlazorWebView in a .NET MAUI app: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview
- An introduction to WebView2: https://docs.microsoft.com/en-us/microsoft-edge/webview2/
- A nice overview for hybrid development with .NET including .NET MAUI: https://www.codemag.com/Article/2111092/Blazor-Hybrid-Web-Apps-with-.NET-MAUI
If you want to see a more challenging example where Blazor is embedded in Excel, you can read more on:
Need fast support in a .NET project? You can find me here: https://www.pi-informatik.berlin/softwareentwicklung/
