How to intercept touch events over the UWP Webview component?

Question

I am creating an UWP split screen app. I want to be able to drag and drop the webviews to change their position.

I can not manage to subscribe to the touch events that take place on the surface of the webview in order to begin processing the drag gesture. All my touches are consumed/trapped by the webview.

I have tried to

• Listen for PointerMoved events on the WebView - no events are generated
• Listen for PointerMoved events on the parent container (Grid) of the WebView - no events are generated for the webview surface
• Listen for PointerMoved on the CoreWindow (CoreWindow.GetForCurrentThread()) - no events are generated for the webview surface
• Inject JavaScript code into the webview to gather the touch events - this works, but I am unable to pass the events back into the C# code because of the window.external.notify requires the domain to be whitelisted (wildcards are not supported), I want to make this usable for all web pages.

How can I intercept touch events that happen over a UWP webview component?

Answer 1

Generally, we can't intercept touch events over WebView component and this is by design. Refer from Input events and tab order in Web view :

As indicated in the Events table on the WebView class page, web view doesn't support most of the user input events inherited from UIElement , such as KeyDown , KeyUp , and PointerPressed . Instead, you can use InvokeScriptAsync with the JavaScript eval function to use the HTML event handlers, and to use window.external.notify from the HTML event handler to notify the application using WebView.ScriptNotify .

Usually, the workaround here would be using some JavaScript library to recognize/gather user input and interacting with JavaScript by using the InvokeScriptAsync method and the ScriptNotify event. However, as you've known, to enable an external web page to fire the ScriptNotify event when calling window.external.notify , you must include the page's URI in the ApplicationContentUriRules section of the app manifest. And domain wildcards (for example, " https://.com " and "https://.") is not allowed. So this is not a option for you.

For your scenario, I'd suggest you add a header or some other borders for your web view and then drag the header/border to change their position like what in Edge or Chrome. In these browsers, dragging and dropping on content surface also won't change browser's position. To change its position, we need drag on its header.