Provide an official solution to use CoreWebView2CompositionController in WinUI 3 environment

[GetGet99]

Is your feature request related to a problem? Please describe.

Yes, it does. Currently, the WebView2 component in Microsoft.UI.Xaml.Controls.WebView2 has limited functionality that if I have access to CoreWebView2CompositionController, I may be able to add more functionality to WebView2 control. For example, WebView2 control in UWP and WinUI 3 lacks the ability to set the default background color, but it is possible to set them using the CoreWebView2CompositionController object.

In the UWP environment, these problems can be resolved by manually creating WebView2 control by ourselves using CoreWebView2CompositionController and handling pointer and key events, and setting the RootVisualTarget tp a Windows.UI.Composition.Visual object. In UWP, it can be resolved by setting the default background color from the CoreWebView2CompositionController.

In WinUI 3, however, most of the composition APIs are using Microsoft.UI.Composition.Visual. As far as I am aware, it is impossible (or maybe I haven't figured out how to do this yet) to get IDCompositionVisual or Windows.UI.Composition.Visual from it. But I do need them to set the visual to CoreWebView2CompositionController because it does not accept the Microsoft.UI.Composition.Visual object.

Describe the solution you'd like and alternatives you've considered

I would like an API that allows us to use CoreWebView2CompositionController in WinUI 3 in the way that it shows the web view in the interface. One of the ways is to have an API to set RootVisualTarget to Microsoft.UI.Composition.Visual. Since I am not sure how WinUI 3 internally works, the team may consider working on other kinds of API alternatives to accomplish the same goal.

As stated in the problem part, I am not aware of any alternatives right now.

Finally, I would like to state these to make it clear that

1. This issue is not related to exposing or not exposing the CoreWebView2CompositionController object from WebView2 control itself in any platform.
2. This issue is not related to adding or not adding more APIs to the associated WebView2 control in any platform. I am stating this because CoreWebView2CompositionController may get updated in the future and WebView2 control in each platform may not utilize the new APIs, but this ensures that users who want to integrate new features can do so before the official WebView2 control in each platform gets updated.

AB#45813100

[novac42]

Thanks for reaching out. I've assigned this to a dev who can help follow up on this.

[softworkz]

I am facing the exact same problem, right in this moment...

[johna-ms]

The main problem I'm reading here is the you can't set DefaultBackgroundColor on WinUI3. You can set it with environment variable as described here:

https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2controller2?view=webview2-1.0.1774.30&viewFallbackFrom=webview2-1.0.1722.32#get_defaultbackgroundcolor

To your general question about rolling your own WebView2 control, WinUI3 has ElementCompositionPreview.GetElementVisual just like UWP does. You can get the WUC.Visual object for the Canvas element and parent that to the webview2 visual.

[softworkz]

The main problem is about not being able to render the WebView2 with transparency on top of other controls.

The environment variable has no effect here.

Where is the source code for the WinUI3 WebView2 control? I couldn't find it?

So I started from the WinUI2 source code, and I'm creating a CoreWebView2CompositionController. The problem is that I couldn't find out what to use as parameter for the SetRootVisual method.

[johna-ms]

I see. The environment variable only renders the web contents' background color transparent. I believe what is showing through is the underlying control's background color. You might try setting this property in addition and see if that helps: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.control.background?view=winrt-22621

The question of whether the WinUI3 implementation of WebView2 control is open source is one for the WinUI team. I do not know about that.

Regardless, looking at the open source implementation of the WebView2 control, this seems a good place to start. You Regarding what you can use for put_RootVisualTarget, you can use ElementCompositionPreview.GetElementVisual API as I suggested earlier: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.hosting.elementcompositionpreview?view=winrt-22621

Choose the UIElement that you want to parent the WebView2 control and pass the visual of that UIElement as the parameter to put_RootVisualTarget

[softworkz]

This is pretty much what I tried:

        void CreateAndSetVisual()
       {
           if (m_visual == null)
           {
               var mainWindow = Microsoft.Maui.Controls.Application.Current.Windows[0].Handler.PlatformView as MauiWinUIWindow;
               m_visual = mainWindow.Compositor.CreateContainerVisual();
           }
           SetCoreWebViewAndVisualSize((float)this.ActualWidth, (float)this.ActualHeight);
           ElementCompositionPreview.SetElementChildVisual(this, this.m_visual);
           this.CoreWebView2Controller.RootVisualTarget = this.m_visual;
       }

[softworkz]

The docs here (https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2compositioncontroller.rootvisualtarget?view=webview2-dotnet-1.0.1774.30) say that it can be either an IDCompositionVisual - which I don't have or a Windows::UI::Composition::ContainerVisual - which I don't have either. What I have is a Microsoft::UI::Composition::ContainerVisual instead and trying to set that produces an error.

[softworkz]

The question of whether the WinUI3 implementation of WebView2 control is open source is one for the WinUI team. I do not know about that.

I rather meant the WebView2 COM source code, from which I was hoping to see what types it might actually accept for set_RootVisual (despite of what the docs are telling... 😉 )

[softworkz]

Sorry for flooding, but I thought it might be important to note that I got it working when using the "normal" hWnd based controller - even in a MAUI (WinUI3) app. Besides the fact that doing so, probably invalidates it from being a true WinUI3 app, it might somewhat prove at least that I didn't make any other mistake...

[johna-ms]

Ahhh sorry I didn't realize you were developing in MAUI. That is different from standard WinUI3 since it is based on Xamarin. I'll have to get back to you on whether it's possible to roll your own WebView2 control. Glad you were able to get it working with HWND based controller.

[softworkz]

Ahhh sorry I didn't realize you were developing in MAUI. That is different from standard WinUI3 since it is based on Xamarin.

Not true. iOS and Android targets use Xamarin. Windows targets use WinUI3.

Forget about MAUI. This is a WinUI3 issue.

[softworkz]

https://learn.microsoft.com/en-us/dotnet/maui/what-is-maui
(if that wouldn't be true, none of what I've done could have worked at all 😆 )

[softworkz]

MAUI works in a way that you can have common code and platform specific code in a single project - even with partial classes that have a common "part" and platform specific parts. What makes MAUI more powerful than other platforms is that - for every target platform - you have full access to the native/platform-specific APIs.

So - for Android, you have the full Android Java API available (wrapped to C# by Xamarin) and for Windows, you use the actual WinUI3 APIs and libs - without any layer in-between.