Scrollerview 内的 UWP Webview答案

【问题标题】：UWP Webview inside ScrollerviewScrollerview 内的 UWP Webview
【发布时间】：2023-03-19 03:33:01
【问题描述】：

我正在开发我的第一个 UWP 应用，我需要一些帮助。

我在 XAML 的 Scrollerview 中有一个 Webview，我正在使用 webview NavigateToString() 方法以 HTML 格式加载一些字符串。问题是当我将 Webview 放入 Scrollerview 时，Webview 本身不可见或未加载字符串或两者兼而有之。

我可以确认 NavigateToString() 方法适用于我的字符串，因为如果我将 WebView 放在 Scrollerview 之外，我可以看到它们。我尝试使用ScrollableHtmlView，但这在项目符号和编号方面存在一些问题。

我在 ScrollerView 中使用 Webview 的原因是因为我想在 WebView 顶部有一个 Image 并让它们一起滚动。

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： uwp windows-10-universal

【解决方案1】：

我试图重现您的问题，将WebView 直接放入ScrollerView 中，如下所示，但我无法重现：

<ScrollViewer>            
    <WebView Source="http://microsoft.com" x:Name="WebViewControl" ></WebView>  
</ScrollViewer>

但我发现我可以使用如下代码重现您的问题：

 <StackPanel>
     <Image  Source="Assets/caffe1.jpg"  Stretch="None" ></Image>
     <WebView Source="http://microsoft.com" x:Name="WebViewControl" ></WebView>
 </StackPanel>

对于这种情况，我通过添加WebView 的MinHeight 属性解决了webview 不可见的问题，如下所示：

<WebView Source="http://microsoft.com" x:Name="WebViewControl" MinHeight="400"></WebView>

如果你在通过下面的代码完成WebView导航后尝试在你的场景中获取ActualHeight，你会发现结果可能为0，这可能是WebView不可见的原因。由于一个容器内还有一个控件，并且我们没有为这些控件设置高度，因此将自动为每个控件计算高度。高度由控件的内容自动设置。 WebView 需要时间来加载可能导致高度计算问题的内容。

WebViewControl.NavigationCompleted += WebViewControl_NavigationCompleted; 

private void WebViewControl_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    System.Diagnostics.Debug.WriteLine("Actual height of webview:" + WebViewControl.ActualHeight);
 }

顺便说一句，如果要根据内容设置高度可以参考this thread。

【讨论】：

设置 minHeight 有所帮助，但这不是理想的行为。我希望 scrollviewer 滚动图像和 webview 而不是 webview 本身滚动。此外，设置 webview 高度的 javascript 不起作用。
@G.Mason 如果上述线程中的 javascript 无法正常工作，请尝试this demo。请注意，这可能会在垫或模拟器上出现一些问题。详情可以参考this thread