how to make wpf webview scroll like webbrowser?

Question

I'm trying to use a Microsoft.Toolkit.Wpf.UI.Controls.WebView control in a wpf desktop application. It seems to use substantially less resouces than the webbrowser control and is much more up to date, being based on edge. However, unlike the webbrowser control, it won't scroll unless selected. i.e. When the mouse is over the webbrowser I can scroll up and down without selecting first but webview ignores the mouse wheel if it isn't the current selected control.

Using VS2019 the following code demonstrates the problem.

<Window x:Class="test0.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        Title="MainWindow" Height="600" Width="1024">

    <Grid>
        <StackPanel>
            <Button Content="hello world" Height="100" />
            <WPF:WebView Source="https://bing.com" Height="250" />
            <WebBrowser Source="https://bing.com" Height="250" />
        </StackPanel>
     </Grid>

</Window>

On running, both browser controls will scroll when the mouse cursor is over. After clicking the button (removing the focus from either of the browsers), only the webbrowser control scrolls on mouseover.

Is there any workaround to fix this?

Using: .NET Framework 4.7.2 and Microsoft.Toolkit.Wpf.UI.Controls.WebView 5.1.1

Answer 1

Problem solved! But nothing to do with VS, or framework versions etc. It seems the touchpad driver doesn't play nice with the webview control under some circumstances. It was remiss of me not to mention I was using a touchpad vs a genuine mouse but it never occurred to me there would be a difference. Until I plugged in a mouse and there was no problem.

Anyway, the solution was to download and install precision touchpad drivers as per:

https://www.windowscentral.com/how-enable-precision-touchpad-drivers

Which solved the problem... Until windows decided to "update" the driver back to the old one. The only way to stop windows doing this was to disable "Automatic driver downloads" as per:

https://www.laptopmag.com/articles/disable-automatic-driver-downloads-on-windows-10

I wish I had mentioned I was using a touchpad as I suspect the problem might have been more easily reproducible for those who aren't using precision touchpad drivers.

Answer 2

I have created a sample page and also give code in the answer as per your requirement please review existing code and get back to me if there are any queries.

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="720" Width="1280">
<Grid>
    <StackPanel>
        <Button Content="hello world" Height="100" />
        <!--<WPF:WebView Source="https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-8" Height="250" />-->
        <WPF:WebView Source="https://bing.com" Height="250" />
        <WebBrowser Source="https://bing.com" Height="250"/>
    </StackPanel>
</Grid>

Bing is a one view site so the search panel is not able to scroll even if you can directly check in on web browser.

Edit:

Can you please check your windows version and SDK as per requirements

https://learn.microsoft.com/en-us/uwp/api/windows.web.ui.interop.webviewcontrol

Windows version: 1809

SDK version: 17763

Added values:

AddInitializeScript

GotFocus

LostFocus

Answer 3

I do believe this is what you're looking for.

You'll want to define Row Definitions for your Grid as you see below and assign the what I assume is going to be your toolbar with "hello world" into Grid Row 0 and your web browser into Grid Row 1 rather than using the Stack Panel in this scenario (see code below).

Let me know if that helps or if you need it done a little differently I'm sure I could help you figure that out.

Grid Row Definitions - Microsoft Docs

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Content="hello world" Height="100" Grid.Row="0"/>
        <WebBrowser Source="https://bing.com" Grid.Row="1"/>
        <WPF:WebView Source="https://bing.com" Grid.Row="2"/>
    </Grid>
</Window>