如何使 wpf webview 像浏览器一样滚动？

Question

我正在尝试在 wpf 桌面应用程序中使用Microsoft.Toolkit.Wpf.UI.Controls.WebView控件。 它似乎比 webbrowser 控件使用的资源少得多，而且基于边缘，它是最新的。 但是，与 webbrowser 控件不同的是，除非被选中，否则它不会滚动。 即当鼠标悬停在浏览器上时，我可以在不先选择的情况下上下滚动，但如果它不是当前选定的控件，webview 会忽略鼠标滚轮。

使用 VS2019 以下代码演示了该问题。

<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>

运行时，当鼠标 cursor 结束时，两个浏览器控件都会滚动。 单击按钮后（从任一浏览器中移除焦点），只有 webbrowser 控件在鼠标悬停时滚动。

有什么解决方法可以解决这个问题吗？

使用：.NET 框架 4.7.2 和 Microsoft.Toolkit.Wpf.UI.Controls.WebView 5.1.1

Answer 1

问题解决了，但与VS无关。 或框架版本等。在某些情况下，触摸板驱动程序似乎无法与 webview 控件配合使用。 更不用说我使用的是触摸板和真正的鼠标，这是我的失职，但我从未想过会有区别。 直到我插入鼠标并没有问题。

无论如何，解决方案是按照以下方式下载并安装精密触摸板驱动程序：

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

这解决了问题......直到 windows 决定将驱动程序“更新”回旧驱动程序。 停止 windows 这样做的唯一方法是禁用“自动驱动程序下载”，如下所示：

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

我希望我提到我使用的是触摸板，因为我怀疑对于那些不使用精密触摸板驱动程序的人来说，这个问题可能更容易重现。

Answer 2

我创建了一个示例页面，并根据您的要求在答案中提供代码，请查看现有代码，如果有任何疑问，请回复我。

<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://docs.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 是一个单视图站点，因此即使您可以直接在 web 浏览器上签入，搜索面板也无法滚动。

编辑：

您能否根据要求检查您的 windows 版本和 SDK

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

Windows 版本：1809

SDK 版本：17763

附加值：

添加初始化脚本

获得焦点

失去焦点

Answer 3

我相信这就是你要找的。

您需要为您的网格定义行定义，如下所示，并将我假设的工具栏与“hello world”分配到网格行 0，将 web 浏览器分配到网格行 1，而不是使用堆栈面板在这种情况下（见下面的代码）。

让我知道这是否有帮助，或者您是否需要做一些不同的事情，我相信我可以帮助您解决这个问题。

网格行定义 - 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>

Answer 4

我已阅读您的查询并尝试找出一些问题。 请在此处检查您的 windows 和SDK版本。

• 您的windows版本必须有以上或1809
• 你的SDK版本必须有以上或17763

如有任何疑问或困惑，请告诉我。