How can I get keyboard input when WebView visible in C++/XAML/UWP App?

Question

I have a game app that is rendered on a Canvas, with an interface rendered in a WebView.

All the pre-game menus happen in the WebView. When the game starts I switch the WebView to a page with a transparent background so you can see the game Canvas through it, but I can still overlay some interface elements.

This all works fine graphically, and I can see my game clearly with the WebView interface overlayed. I can communicate between the game and the interface quite happily.

The problem I have is getting the WebView to give up the keyboard, so I can use the keys to control the game.

My keyboard listener is triggered on the (theoretically) global event Window.Current.CoreWindow.KeyDown, so it should get keyboard events whatever has the focus.

• I cannot set the focus on the Canvas (and add KeyDown to the Canvas), because it doesn't have a Focus() method.
• I cannot get the WebView to relinquish the keyboard by calling Focus(unfocus). It just doesn't.
• I cannot add KeyDown and KeyUp handlers to the Webview, and pass them on to the Canvas, because WebView doesn't support those methods. (see https://learn.microsoft.com/en-us/windows/uwp/controls-and-patterns/web-view)
• I cannot add KeyDown and KeyUp handlers to the common parent of the WebView and Canvas, because the WebView doesn't let the events 'bubble up'.
• I cannot call the low-level keyboard functions from the game in Windows, because the function calls never return. (See How Can I Call GetAsyncKeyState() in UWP DirectX/XAML App?)
• I cannot use the HTML functions to provide input via JS, because they're too unresponsive for the game.
• I cannot use FocusManager to cycle through the focussable objects, because it only ever chooses the WebView.
• I cannot use WebViewBrush because overlay elements need to animate.

If I hide the WebView everything works fine, the keyboard events are picked up and the game is controllable. Obviously though I can't see the overlayed elements.

Is there some way to let me receive the keyboard events when the WebView is visible?

This is a Win 10/UWP app written in XAML/C++. Target platform is Win 10 10.0.14393.0/ minimum 10.0.10586.0 Tested on Surface Book running Windows 10 v1703 15063.674

Answer 1

We have a Webview that must be interactive in our game at all times. The least ugly workaround that I have found so far is injecting a global event listener into the javascript to hook keyboard input, and relaying this back to the app via notify()

function onKeyDown(ev: KeyboardEvent) {

    let wrapper = { keyDown: ev }
    window['external']['notify'](JSON.stringify(wrapper));
}

function onKeyUp(ev: KeyboardEvent) {

    let wrapper = { keyUp: ev }
    window['external']['notify'](JSON.stringify(wrapper));
}


...

        let options: AddEventListenerOptions = { capture: true, passive:true,once:false } 
        document.addEventListener("keydown", onKeyDown, options);
        document.addEventListener("keyup", onKeyUp, options);

Answer 2

Had a similar problem but managed to fix it with this trick based on Andy's answer:

DispatcherTimer timer = new DispatcherTimer
{
    Interval = TimeSpan.FromMilliseconds(100)
};

timer.Tick += (s, e) =>
{
    if (FocusManager.GetFocusedElement() is WebView webView)
    {
        webView.Visibility = Visibility.Collapsed;
        webView.Visibility = Visibility.Visible;
    }
};

timer.Start();

Answer 3

It is possible to release the focus from the WebView by hiding and then showing it again immediately.

webView->Visibility = Visibility::Collapsed;
webView->Visibility = Visibility::Visible;

Even if there's nowhere else for the focus to go - after this operation, FocusManager::GetFocusedElement() will return null.

The webview will remain visible, but keyboard events can now be received via Window.Current.CoreWindow.KeyDown.

Note however that any interaction with the webview (eg. touch, navigation) will cause it to regain focus and you will stop receiving keyboard events.

This isn't a very satisfactory solution, but it sort-of fulfills the requirement to see the webview but also receive keyboard events.