如何使WPF WebView像WebBrowser一样滚动？

Question

我正在尝试在wpf桌面应用程序中使用Microsoft.Toolkit.Wpf.UI.Controls.WebView控件。与webbrowser控件相比，它似乎使用的资源要少得多，并且更加现代化，因为它基于edge内核。然而，与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>

运行时，当鼠标指针悬停在两个浏览器控件上时，它们都会滚动。点击按钮后（将焦点从任一浏览器中移除），只有WebBrowser控件在鼠标悬停时滚动。

是否有任何解决方法来解决这个问题？

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

- poby

---

这很奇怪，因为它对我有效。你使用的框架和工具包版本是什么？ - Tronald

@Tronald Framework 4.7.2和Toolkit 5.1.1，你确定它对你有效吗？最初，这两个控件都会滚动而不进行选择，但在点击按钮后，只有WebBrowser会滚动。除非首先单击WebView，否则它将忽略鼠标滚轮。 - poby

我刚刚尝试了一下使用匹配的版本，它对我仍然有效（我还通过单击按钮确认我失去了焦点）。这真的很奇怪。你认为这可能是Edge的问题吗？也许某些版本的Edge不会在鼠标悬停时聚焦。 - Tronald

我正在使用最新版本的Edge浏览器，它可以在鼠标悬停时正常滚动。只有Webview无法正常工作。实际上，如果我在UWP应用程序中使用Webview，则可以正常工作。但是，在WPF应用程序中使用Webview失败了。至少对我来说是这样。 - poby

我也无法重现这个问题，在我的端上似乎工作正常！ - SamTh3D3v

Answer 1

问题解决了！但与VS、框架版本等无关。似乎在某些情况下，触摸板驱动程序与webview控件不兼容。我犯了一个疏忽，没有提到我使用的是触摸板而不是真正的鼠标，但我从未想过会有什么区别。直到我插上鼠标，才发现没有问题。

无论如何，解决方案是根据以下链接下载和安装精准触摸板驱动程序：

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

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

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

我希望在提出问题时能够提及我正在使用触摸板，因为我认为这个问题可能更容易被那些没有使用精准触摸板驱动程序的人重现。

- poby

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://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是一个单页面视图网站，因此即使您可以直接在Web浏览器中检查，搜索面板也无法滚动。

编辑：

请按照要求检查您的Windows版本和SDK。

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

Windows 版本：1809

SDK 版本：17763

新增数值：

AddInitializeScript

GotFocus

LostFocus

- Ishan Patel

---

不起作用。顺便说一下，无论使用哪个网站作为源，都没有滚动条。 - poby

请按照要求检查您的Windows版本和SDK[链接]（https://learn.microsoft.com/en-us/uwp/api/windows.web.ui.interop.webviewcontrol）。 - Ishan Patel

Windows 10（1903）版本：10.0.18362 在UWP应用程序中可以完美运行，但在wpf中却不行。 - poby

Answer 3

我相信这就是您要找的内容。

您需要为网格定义行定义，如下所示，并将我假设将成为您的工具栏的"hello world"分配到网格行0中，将Web浏览器分配到网格行1中，而不是在此情况下使用堆栈面板（请参见下面的代码）。

如果有帮助，请告诉我，或者如果您需要以稍微不同的方式完成它，我肯定可以帮助您弄清楚。 网格行定义-Microsoft文档

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

- Hawkeye4040

---

我想指出的是，我自己运行了这个程序，并且它可以正常工作。 - Hawkeye4040

仍然不起作用。也许是我的 Synaptics 鼠标驱动程序中的一些奇怪的隐晦错误……还有一件事，如果我点击 Web 浏览器，我仍然能够在鼠标悬停在 Web 视图上时滚动。只有当我点击任何其他控件时，Web 视图似乎才会忽略鼠标滚轮。 - poby

似乎出现了一些奇怪的情况。如果您有另一个鼠标可用，可以尝试使用它来排除鼠标驱动程序的问题。我也查看了其他回答者的代码，并且它在我的计算机上运行良好。需要排除很多可能性。确保所有内容都是最新的，包括VS2019、正在使用的SDK等。我正在尝试复制您所描述的条件。我认为Ishan Patel的焦点想法是正确的。我希望使用网格布局有助于解决布局问题。当我第一次加载它时，我注意到了这个问题。 - Hawkeye4040

我确认我的VS 2019是最新的，这里是相关输出，供您比较版本。它在我的电脑上运作良好，我也无法复制这个错误。我尝试切换鼠标并玩弄TAB键，看看是否可以以某种方式破坏元素的焦点，但没有问题。您提到鼠标也让我觉得值得排除。您还尝试过其他未在帖子中列出的方法吗？ - Hawkeye4040

微软 Visual Studio 社区版 2019 版本 16.3.9。我看到下面列出了 SDK 和 Windows 版本。大多数情况下这些只是排除一些可能性。 - Hawkeye4040

另一个需要排除的可能是您当前使用的.NET框架版本。为了澄清，这在Microsoft .NET Framework版本4.8.03752中对我来说运行良好。 - Hawkeye4040

Answer 4

我已经阅读了您的查询并尝试解决一些问题。请检查您的Windows和SDK版本HERE。

• 您的Windows版本必须高于或等于1809
• 您的SDK版本必须高于或等于17763

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

- Deep Soni

---

Windows和SDK版本均高于最低要求：Windows 10 1903 SDK（10.0.18362.0）。 - poby