BlazorWebView for WinUI 3

[Pinox]

Description

Please enable BlazorWebView for WinUI 3. I currently have Blazor Views that I would like to use in a native WinUI 3 app and there is no easy way to do that.

What I find strange is that I understand BlazorWebView works in Winforms + WPF and not in WinUI3.

Public API Changes

--

Intended Use-Case

Here is an example view of how I want to use it , this is part of the WinUI 3 Control galley app.

This is a code snippet in MAUI of the functionality:

I think it will also make native WinUI development more approachable and powerful where I can now sherry pick the best UI assets that exist in the market. ( from web , native controls or skia ) and my feeling is native development needs this as it is becoming more and more difficult to justify native WinUI3 development over PWA apps.

It will also significantly decrease the cost of native windows development.

I also raised this request in WinUI 3 template studio but I understand the feature should be raised in the maui repo here.

https://github.com/microsoft/TemplateStudio/issues/4506

[javiercn]

@Pinox thanks for contacting us.

You can use Blazor Hybrid on WinUI via .NET MAUI (Maui Blazor).

[Pinox]

thanks @javiercn , but wouldn't that mean I cant use all the native WinUI 3 controls ? I now have to write MAUI XAML and add an extra layer of complexity between the native WinUI 3 controls.

[javiercn]

@Pinox I'm not sure if MAUI prevents using the native controls. I think there is a way but I'm a Blazor "expert". Let me check-in with the rest of the team and we'll update this issue once we've discussed it.

/cc: @danroth27

[danroth27]

While you can use .NET MAUI to target Windows using WinUI 3 there are still cases where you may want to use WinUI 3 directly and write a native Windows app without any .NET MAUI abstractions. For example, the Windows apps that ship with the Windows OS have no requirements to be cross-platform. We don't have any immediate plans to add a BlazorWebView for WinUI 3, but we can consider doing so based on user feedback.

[Pinox]

Just my general observation. MS touts WinUI 3 as the future for native desktop development that is using the Windows SDK. So the webview control was created to "modernize" your legacy native apps with web content. If there is no integration of Blazor into WinUI 3 then you are forcing everyone to migrate again to another stack. There is now no migration path forward for native apps that wants to tightly integrate web content within the same app and that wants to use c# doing so. (at least not an easy way)

To me this fragments the whole .NET ecosystem even further and I think that is a mistake. Surely the end goal should include the unification of the ecosystem and bringing everyone into the loop. This will make everyone stronger including Blazor and MAUI.

I'm sitting with a native app that I want to upgrade to WinUI3 as that is the recommended path forward for Windows development. In the process of doing this I would like to "modernize" this with web content where it make sense and immediate I am getting stuck and that is not cool.

Please seriously consider this as a priority.

[drasticactions]

Using Maui Embedding you can add a BlazorWebview to an existing WinUI3 app and integrate it with your existing WinUI3 app (or any other "native" platform app that MAUI targets, like iOS and Android). That should functionally do what you want.

Granted, this is also something we have no documentation for outside of what Clancy wrote for that PR, and if I didn't tell you that was a thing you could do, you would have never discovered it on your own.

[Pinox]

Thanks @drasticactions. Did not know about the embedding part. good to know.

With my limited understanding here, the maui controls do not expose the BlazorWebView only the normal webview control.

What we need is the BlazorWebView. When I look at the WPF implementation then that "BlazorWebView wrapper" seems to live in:
Microsoft.AspNetCore.Components.WebView.WindowsForms Microsoft.AspNetCore.Components.WebView.Wpf

So what we need is a Microsoft.AspNetCore.Components.WebView.WinUI component that do not currently exist. In Wpf this implementation is as simple as:

A good article about the BlazorWebView is: https://www.codemag.com/Article/2111092/Blazor-Hybrid-Web-Apps-with-.NET-MAUI

[ghost]

We've moved this issue to the Future milestone. This means that it is not going to be worked on for the coming release. We will reassess the issue following the current release and consider this item at that time.

[Pinox]

I certainly hope that the Blazor Team gives WinUI3 some shine this year in .NET 8 planning.

What I would like to see is a:

Blazor WinUI 3 Native template A project that creates a native WinUI3 app and uses BlazorWebView to add Blazor functionality to a native WinUI 3 app where native WinUI 3 controls can also be used.

[jlipford]

This would round out things nicely! Or configure MAUI to be "a la carte" that also the maui handlers respecting those platform choices.

[javiercn]

I find it confusing that Mac, iOS and Android are supported on both Maui and Maui Blazor, but WinUI is only supported on Maui?

Maui Blazor is supported in WinUI via Maui, what we do not provide is standalone support for WinUI without Maui being in the picture (we do not provide a package like we do for WPF/WinForms) because our support for WinUI builds on top of Maui.

[Dylan-IRISNDT]

Thanks @javiercn I misunderstood this issue and what was mentioned at the community standup. I have removed my post so that it doesn't confuse someone else.

[drasticactions]

I find it confusing that Mac, iOS and Android are supported on both Maui and Maui Blazor, but WinUI is only supported on Maui?

Maui Blazor is supported in WinUI via Maui, what we do not provide is standalone support for WinUI without Maui being in the picture (we do not provide a package like we do for WPF/WinForms) because our support for WinUI builds on top of Maui.

@javiercn Is there a technical reason for that? Could the base BlazorWebViews be separated into nugets based on the platform (So, WinUI, MacOS, iOS, Android, etc.) and a wrapper could be provided within MAUI that implements those nugets? That would let people run the BlazorWebView outside of the MAUI UI Framework, so you could then run it straight within a WinUI project, rather than needing to reverse embed it.

[javiercn]

@drasticactions it's another package/platform for us to develop, test and maintain. It's not just about the runtime bits, but about all the other aspects around the experience (static content, publish, etc.) that need to be figured out, which is not free.

[drasticactions]

@javiercn That's fair. So would Native Embedding of the BlazorWebView (https://github.com/dotnet/maui/pull/5218) be supported then for WinUI?

[javiercn]

@drasticactions I am not familiar with how native embedding works, but assuming it works without the component doing additional work, I do not see why not.

[Pinox]

@drasticactions it's another package/platform for us to develop, test and maintain. It's not just about the runtime bits, but about all the other aspects around the experience (static content, publish, etc.) that need to be figured out, which is not free.

@javiercn. If MS could muster a business case to develop BlazorWebView for WPF and Winforms how can you not do it for WinUI3 ? Surely way more projects invested and going to be invested in WinUI3 than Winforms & WPF. Point I'm trying to make surely WinUI3 should have been first in the queue and it's not.

[javiercn]

@javiercn. If MS could musted a business case to develop BlazorWebView for WPF and Winforms how can you not do it for WinUI3 ? Surely way more projects invested in WinUI3 than Winforms & WPF. Point I'm trying to make surely WinUI3 should have been first in the queue and it's not.

WinUI3 is first in the queue, through Maui. That's our core experience.

[Pinox]

@javiercn We all want to use our existing investments (apps) and add Blazor to it with BlazorWebView control. Your solution through MAUI is essentially throwing away all current investments made and rewriting the entire app (views) through MAUI that is a very expensive proposition and in many cases not feasible.

As an example take the following XAML screen in WinUI3, this is not something I want to redo in Blazor and native embedding as suggested above is probably going to be a nightmare implementing advanced animations etc.

In some cases I really like my current native controls/native pages but adding Blazor content over time with native apps will dramatically lower our development cost as we can reuse more generic content cross platform.

Windows as a platform can absolutely shine with powerful and cool applications if MS can keep native apps in the loop and unified with newer web tech like Blazor.

[scottkuhl]

I have another use case example where BlazorWebView missing from WinUI 3 is a pain point. I am working on a project that is targeting Windows desktop only and requires some serious PDF user editing. SyncFusion provides a good PDF viewer component that has what I need for Windows Forms, WPF, UWP and Blazor. The MAUI version is lacking and the WinUI version is non-existent. WinUI support from control vendors is far behind Blazor and also behind MAUI. The demand is just not there.

So, to create this new application and make up for the lack of WinUI components I can use the BlazorWebView control until the native versions for those components show up. This is a GREAT solution for modernizing apps. BlazorWebView is a fantastic idea!

But lack of a WinUI BlazorWebView means I need to either: 1 - Create the application in MAUI, remove all the platforms except Windows, and add the BlazorWebView. This makes me bring in a multi-platform tech stack I have no need for and will be writing extra code to get to use native WinUI 3 controls. 2 - Create a Windows Forms or WPF application and use the BlazorWebView. This starts me on an older tech stack and any native integration like a modern navigation menu is missing. I have to hack together XAML Islands and / or third party controls, or go with an entire Blazor UI. The latter is missing a strong first party Fluent UI web framework so I probably end up using MudBlazor instead of FAST and now I have a native desktop app with a Google Material front end.

Microsoft, you are not making it easy to create a new native Windows Desktop app with the latest Fluent guidelines, SDKs and controls. This feature would be such a big win. All the marketing material around XAML Islands and BlazorWebView is about modernizing your Windows Forms and WPF app and hopefully one day you can move to WinUI when it has everything you need. But the lack of this issue being prioritized has created a scenario where you have to start with an older tech stack putting you in the scenario you want to get people away from.

With a WinUI BlazorWebView control, I can create a native Windows App using the latest guidelines and frameworks, and use a huge selection of Blazor components when something is missing. This overcomes the lack of support for Windows Forms controls, WPF controls and UWP controls being embedded into a WinUI application.

Even after this all catches up, and my app is someday running on WinUI with all native components, I still want the option to drop in Blazor components into my app. That is a very powerful option!

I sincerely hope, the power of this feature with the amount of effort it takes to implement is realized and it makes it into .NET 8.

[egvijayanand]

Have created a sample solution for the Native Embedding of BlazorWebView in the WinUI 3 project.

The project builds successfully but while executing the project it loads the view but some issues in resolving the URL route address. Kindly look into it and resolve the same.

The sample project is available here.

Notify to @Eilon @danroth27

[Eilon]

@egvijayanand unfortunately that's not something we'll be able to debug because it is currently an unsupported scenario. I suggest trying to attach a debugger and step through your code and/or check if any exceptions are thrown. You might consider examining the source code of the .NET MAUI BlazorWebView to see if the code paths your app is going through in fact create all the necessary objects for this to work. There's a good chance that certain things such as the MauiContext or other "environment" things don't exist, so the BlazorWebView does nothing. There could be ways to simulate the presence of those required objects but I'm not sure.

[egvijayanand]

@Eilon I think native support of BlazorWebView on WinUI 3 is yet to be supported, and on an additional note, I understand it's not supported on any of the platforms for now.

Whereas the scenario that I'm trying is Native Embedding, which means using the MAUI route indirectly. This is a supported feature. Refer to this official docs page.

Am using the ToPlatform() method to convert the BlazorWebView to a Framework element of WinUI 3. The advantage of this approach would allow using the broad set of WinUI 3 controls with the power of Blazor Hybrid. This would open up immense opportunities in real-world apps.

[egvijayanand]

@Eilon @davidortinau @danroth27

Have resolved the issue, it's a project file correction. Based on a recommendation from the build engine, have set the EnableDefaultContentItems project property to false to run the project initially. This caused the BlazorWebView to render incorrectly.

Now the project file is updated accordingly and the BlazorWebView is rendered properly.

So WinUI 3 controls + Blazor Hybrid is possible now.

Sample output:

[Pinox]

@egvijayanand Awesome work !! I followed your link to the GitHub project. Project builds but I get an error when trying to run. Rebuilding + deploying solution has no effect on error.

Is there something specific that I need todo ?

[egvijayanand]

Try running the project in Unpackaged type. Switch the option from Project Run toolbar, one with the Play button.

Seems like upload of appxreceipe/pubxml file is restricted by gitignore file.

Will check it out and update on the same.

[Pinox]

thanks @egvijayanand , that sorted out the error that I got.

[egvijayanand]

Seems like upload of appxreceipe/pubxml file is restricted by gitignore file.

Issue resolved. Since it's a collaboration of two app models, requires a slight change in the way resources are handled and they fall in the region of .NET MAUI. So, find them under the Resources folder.

And while working with the Unpackaged model, this project property needs to be uncommented in the project file otherwise it'll result in the below error message and for the Packaged model, this needs to stay as commented:

<WindowsPackageType>None</WindowsPackageType>

Error message: Unable to load DLL 'Microsoft.ui.xaml.dll' or one of its dependencies: The specified module could not be found. (0x8007007E)

[Eilon]

@Eilon @davidortinau @danroth27

Have resolved the issue, it's a project file correction. Based on a recommendation from the build engine, have set the EnableDefaultContentItems project property to false to run the project initially. This caused the BlazorWebView to render incorrectly.

Now the project file is updated accordingly and the BlazorWebView is rendered properly.

So WinUI 3 controls + Blazor Hybrid is possible now.

Wow that's actually super cool, I wasn't even aware of that ability. Thank you for sharing 😄

I'll leave this issue open so that we can consider possibly enabling direct support for BlazorWebView in WinUI3, though it's currently not planned. For anyone wanting to do it now, it looks like there is a reasonable and fairly easy way to do it!

[egvijayanand]

I'll leave this issue open so that we can consider possibly enabling direct support for BlazorWebView in WinUI3

This is good for POC and still depends on this issue #14247 to take it to the next level.

For anyone wanting to do it now, it looks like there is a reasonable and fairly easy way to do it!

Since the Blazor team knows the dependencies involved more than anyone else, they can look into it in detail and pack it as a NuGet package in the near future. So that messy workarounds can be avoided and production ready.

[manfromarce]

I'm still getting the "Can't reach page at https://0.0.0.0" error with these workarounds. Also, it seems there is a similar issue when using MAUI Embedding + BlazorWebView in a native .NET 7 Android app, it builds without errors but BlazorWebView doesn't load the content.

[egvijayanand]

Hope you've the wwwroot folder along with its artifacts in the project. I faced this issue once.

No worries, have released it as a template itself (currently in preview, optimisation WIP). More details in this article here.

[manfromarce]

Yes you are right, thank you, the wwwroot wasn't getting copied properly from a shared razor class library.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[w-ahmad]

I noticed this issue and wanted to share that I created a BlazorWebView for WinUI 3 a few months. It was a fun project cause I cloned WPF BlazorWebView and managed to work with WinUI3. It might be worth a try while we wait for an official control from Microsoft.

here is a working sample app

https://github.com/user-attachments/assets/2b65a4a5-7bef-45c1-9a0c-0340afc55436

https://github.com/w-ahmad/BlazorWebView.WinUI/tree/main/src/HybridSampleApp