How to allow moving focus to and from the WPF WebView control using the Tab key

If you've ever used the WPF Microsoft Edge Legacy based WebView control (not to be confused with the Internet Explorer based WebBrowser control), you may have noticed that you can't use the Tab key to move focus to and from the said control and that only the mouse allows moving focus to and from it. You may also have noticed that using the WebView.Focus() method does not work. Luckily, the WebView contains both a function you can use to move focus to the WebView and an event which fires when the user attempts to move focus away from the WebView using the Tab key.

How to move focus to the WebView using the Tab key

We can moved focus to the WebView using the MoveFocus function of the WebView. In order to detect when the user attempts to focus the WebView, we can use a dummy button to detect the focus and then move it onto the WebView.

XAML:

<Button x:Name="webViewFocusButton" Height="0" Width="0" Opacity="0" GotFocus="webViewFocusButton_GotFocus"/>

Note that the opacity of the button is set to 0 to make it invisible. The height and width of the button is set to 0 to make it take up no space. We can't simply set the button's Visibility to Collapsed as that will prevent the button from receiving Tab focus. From here, we can handle the GotFocus event of the button.

C#:

webViewMain.MoveFocus(Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Programmatic);

VB:

webViewMain.MoveFocus(Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Programmatic)

This will give the WebView focus when the button receives focus. To ensure the WebView receives focus in the correct order, put the button just above the WebView, or set its TabIndex to an appropriate value.

How to move focus away from the WebView using the Tab key

To move focus away from the WebView, we can use the MoveFocusRequested event of the WebView. We can check the WebViewControlMoveFocusReason to check if the user Tabbed out of the control (Next) or Shift-Tabbed out of the control (Previous).

C#:

private void webViewMain_MoveFocusRequested(Object sender, Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusRequestedEventArgs e)

     {

         if (e.Reason = Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Previous) {

                  // Focus previous control


         }

         else if (e.Reason = Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Next)

         {

                    // Focus next control


         }

     }

VB:

Private Sub webViewMain_MoveFocusRequested(sender As Object, e As Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusRequestedEventArgs)

     If e.Reason = Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Previous Then

         ' Focus previous control

        

     ElseIf e.Reason = Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlMoveFocusReason.Next Then

         ' Focus next control

        

     End If

End Sub

And don't forget to add the event handler:

XAML:

<Controls:WebView x:Name="webViewMain" MoveFocusRequested="webViewMain_MoveFocusRequested"/>

Did this article help you? Do you know of a better way to achieve this? Let us know in the comments!

This snippet is available in Codly. Click the appropriate link below to download the snippet. If you don't have Codly, it is available here in the Microsoft Store.

Comments

Popular posts from this blog

How to enable dark title bar in Windows Forms and WPF (Windows Presentation Foundation) apps

How to enable precision scrolling in a WPF app on Windows

How to show placeholder text in a WPF textbox