WinUI 3.0 is Microsoft’s upcoming UI framework to build modern, native Windows applications.
WinUI is developed open source on https://github.com/microsoft/microsoft-ui-xaml
Last week WinUI 3.0 alpha 2 came out, and Microsoft introduced a WebView2
control that is based on Microsoft Edge Chromium. That means you can run all the modern, awesome web stuff in that WebView2
control if you want.
I thought I give WebView2
a try, and hey, why not trying to host a web app in WebView2
that is built with my favorite Single Page Application (SPA) framework: Blazor!
But just hosting would be easy. I want to call a method in the Blazor App from my WinUI app.
What I ended up is the simple WinUI 3 app that you see below.
At the top of the WinUI application is a WinUI TextBox
where you can enter a firstName (it contains “Thomas” above), and a WinUI Button
with the Text “Update Blazor from WinUI”.
The Blazor application is shown at the bottom of the application window in a WebView2
control. The Blazor app contains a simple component with an input field that contains the text Julia.
When you click on the WinUI Button
“Update Blazor from WinUI” , the text in that Blazor component’s input field is updated with the text from the WinUI TextBox
. Voila:
To implement this WinUI to Blazor communication, you could of course use some kind of server communication via SignalR. With SignalR, the WinUI app would call the server, and the server would call into the Blazor app. But instead of using SingalR, I wanted to call into the Blazor app directly, as it is already in the WinUI app.
I managed to call from WinUI into Blazor via Blazor’s JavaScript Interop. The WebView2
has an ExecuteScriptAsync
method that allows you to execute JavaScript code in the hosted web app.
All the code of this post is available on GitHub: https://github.com/thomasclaudiushuber/WinUI3-WebView2-Hosting-BlazorApp
Let’s look at the most important parts, and let’s start with the Blazor app.
#.net #blazor #javascript #winui #programming #csharp