Transparent pages and clickthrough/mouse/keyboard events

[LiorBanai]

So I managed to create a transparent Winform (see image below) but when loading a page with other controls behind the WebView Control they are not clickable. In the example below I cannot click on the button.

Is there a property I need to turn on for events (keyboard/mouse) to get to other controls behind the transparent page (the button is just an example)?

AB#31913330

[pagoe-msft]

@LiorBanai,

Unfortunately, this is not supported in WebView2 today. The WebView2 control that is on top is consuming the click event and not the button behind it. I've filed a feature request to add this to our backlog.

[LiorBanai]

@pagoe-msft ,
Thanks for the info.

[Skarnivorous]

I think if you open a second window and set as transparent with controls in it, they will be over the top and also interactable?

In the attached picture, the button (blue control across the bottom) is able to be interacted whilst it is over the WebView content (the cube). This isn't probably ideal and may have complications, but as proof of concept, it does work.

[darbid]

@LiorBanai can you please elaborate how you made it transparent?

[LiorBanai]

@darbid , use the latest preview version and set "DefaultBackgroundColor" to transparent (by code or editor).

webView2Control.DefaultBackgroundColor = Color.Transparent;

You also need the have you page itself transparent of course

[darbid]

@LiorBanai If I were you I would override the Webview2 WndProc and list for mouse clicks and then pass them back into WPF.

[LiorBanai]

@LiorBanai If I were you I would override the Webview2 WndProc and list for mouse clicks and then pass them back into WPF.

The problem is that this need to be done only on the transparent part of the page. Not all the page area are transparent

[panxn]

Hi, do you have plan to implement this feature? I have similar requirement:
A transparent webview2 window over directx window, just like head up display in video game. Mouse events should pass to directx window if there is no html element.

[LiorBanai]

@pagoe-msft
any update of this? or expected date?

[emj-sap]

Same porblem here, what works with embedded IE did not work with WebView2 :( Please, could you fix that urgent?

[efecan-yilmaz]

Is there any update on this? We have a feature depending on transparency and we cannot switch to WebView2 because of this issue.

[markpapazyan]

Hi guys, this transparency functionality is a total blocker for us switching to WebView2. Can you comment on this and give an estimate? Thank you!

[hemantkrajput]

In our scenario, we create a transparent window (using SetLayeredWindowAttributes), and create browser control inside that, where ever browser has content, it's clickable, at remaining place background app is clickable (typical scenario of showing bubble help for any application). in Webview2 Browser content part is not clickable, it always pass through to background application.
like in attached screenshot (transparent window with both MSHTML & Webview2 on top of calculator) left side browser button got clicked(MSHTML), but right side Webview2 isn't clickable.

[zigel]

Hi Colleagues, we really need this fix.

[gaetandezeiraud]

Hello, same here, any news? When I click on the window, Webview2 get the main focus. And stop the propagation of keys to the WindowProc of the parent window (win32). It is a problem.

[ItsCubeTime]

👋 @champnic is this still being tracked?

[champnic]

Hey @ItsCubeTime - Yes this is still being tracked, but is lower priority for us. May I ask what your scenario is that you need this feature? It's possible we have an existing workaround or other in the works. For example, we are in the designing phase of fixing the WPF airspace issue (#286) if that is the underlying concern.

[ItsCubeTime]

@champnic

Thanks, the pywebview issue linked right above my message led me here, pywebview can be seen as a more lightweight crossplatform Electron alternative for Python. As commented by its maintainer, Pywebview inherits this issue on the Windows platform & is unique to WebView2.

Im using pywebview to develop a small productivity app & text editor for people working in the medical field to more effectively be able to handle & write journals for there patients.

I was looking to pretty up the borders of my window a bit to make my app a little more visually unique (add rounded borders and a shadow effect to a frameless window via html/css to be precise), which isn't particularly critical. Coming from an artistic background though, being able to have full control over the look of my window without loosing any window functionality would be a nice to have and enable me to get more visually appealing results.

I could also see applications like screen recorders or other apps that require OSD functionality to suffer more heavily from this (issue which I presume to be a) bug.

[champnic]

Hey @ItsCubeTime - Thanks for the info and scenario link. I believe this is generally possible if using the WebView2 Win32 control and changing the attributes of/clipping the HWND parent, but if trying to do rounded corners in this manner with transparency then it does seem blocked by this bug if the WebView2 is on top of other elements that are intended to be clicked.

[yg-i]

My problem is that when the Webview2 control is made transparent, all clicks, regardless of whether they occur in the transparent or opaque part of the page, simply fall through to the window below, without being captured by webview2. Is this the same problem other people are experiencing?

Likewise with mouse hover events.

With the old IE browser control, if my click/hovering is over the opaque portion of the page, those events will be intercepted by the browser control. If they are over transparent portions, they will fall through to the window below -- as desired.