C# Windows Phone 8.1-通过外部ScrollViewer元素处理WebView垂直滚动 问题

我必须在Windows Phone 8.1应用程序中的

ScrollViewer

中显示

WebView

，并满足以下要求：

WebView

高度应根据其内容进行调整

WebView

垂直滚动应由外部

ScrollViewer

处理

WebView

应处理水平滚动、缩放（收缩缩放）、文本选择（使用默认的复制按钮）和链接导航

下图是我的模拟布局（左侧）和类似功能的最佳示例-这将是一个内置邮件应用程序（右侧）

XAML布局示例：

<ScrollViewer>
    <Grid Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <TextBlock Text="My content" />
        </Grid>
        <WebView Grid.Row="1" x:Name="WebViewComponent"></WebView>
    </Grid>
</ScrollViewer>

我试了什么 -此部件工作，经过几次调整，我能够为

WebView

元素设置正确的高度

-不起作用。这里的问题是，在Windows Phone 8.1中，

WebView

组件似乎没有可视子对象（至少没有

DependencyObject

）

我也尝试过使用

manuOpulationMode

和

ishitetVisible

属性，但没有成功

更新

---

将文本选择和复制按钮添加到所需的

WebView

功能中。在最初的问题内容中，不知何故遗漏了它。

您是否尝试过将WebView的Height属性设置为Auto

<ScrollViewer x:Name="scrollViewer" >
    <Grid Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="My content" />
        <Grid Background="Transparent"
              Margin="0"
              Grid.Row="1">
            <WebView ScrollViewer.ZoomMode="Enabled"
                     x:Name="WebViewComponent"  
                     Margin="0" 
                     Height="Auto" />
        </Grid>
    </Grid>
</ScrollViewer>

---

我检查了它并尝试了一些方法，但无法按您想要的方式工作。想出一个不同的设计可能更容易。基本上，不包括外部

ScrollViewer

的东西

• 一个选项（可能有点黑客，还没有测试过）是通过一些JS将内容注入页面，只使用

  WebView

• 如果您的内容很小，您可以将其放在页面顶部，移除

  ScrollViewer

  ，让

  WebView

  处理所有内容。

  WebView

  将更小，但工作正常

---

这些只是不同设计的一些例子。如果你告诉我为什么它们不起作用，或者如果你给我更多关于你的实际问题的信息，我可能会想出更合适的方法。

我一直面临这个问题，我得到了一些部分解决方法（不包括文本选择）

基本上，为了能够使用包含webview的scrollviewer，您需要拖动一些东西，因此我使用了一个高度和宽度与webview相同的矩形

<ScrollViewer Name="ScrollViewer">
    <Grid x:Name="LayoutRoot" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Name="GridHeader">
            <Image Stretch="UniformToFill" Source="ms-appx:///Assets/img_default_header.jpg" />
         </Grid>                
        <Grid Grid.Row="1" x:Name="GridNews" Margin="12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <WebView Margin="-6,12,0,-6" Grid.Row="0" x:Name="WebviewContent" VerticalAlignment="Top" DefaultBackgroundColor="Transparent" /> 
            <Rectangle Margin="0,12,0,0" Height="{Binding Height, ElementName=WebviewContent}" Name="RecWeb" VerticalAlignment="Top" Fill ="#00000000" Tapped="RecWeb_Tapped" />
        </Grid>
        <Grid Name="GridRelatedNews" Grid.Row="2" Margin="12,0">
            <ListView ItemsSource="{Binding NewsDetail.RelatedStory}" ScrollViewer.VerticalScrollBarVisibility="Hidden">  
            </ListView>
        </Grid>
 </ScrollViewer>

我设法允许此解决方案能够使用此方法（loadLink javascript方法）单击内容中的某个链接：

---

也许您可以从这里开始为您的选择文本问题添加一个事件处理程序。使用此解决方案的目的还在于在javascript中找到一个等效的事件处理程序。

我认为Auto是

WebView.Height

属性的默认值，尽管我现在这样做了。完全没有效果。另外，

ScrollViewer.ZoomMode=“Enabled”

不会影响内部浏览器的滚动。只是出于好奇，您是否尝试只注入一些css来禁用overflow:scroll，以便您的ScrollViewer能够真正执行其工作。什么样的？我希望我现在有更多的空闲时间去玩它，不管怎样，这似乎是一个普遍的问题。@Chris我做了

WebView

完全捕获指针交互，并以类似“压缩”滚动的方式进行反应（不确定这是否是一个合适的术语-滚动速度非常慢，一旦松开手指就会恢复）。有点像“一个滚动来滚动所有指针”问题：）问题是屏幕顶部显示的内容可能很复杂，包含图像、按钮等。很抱歉，我似乎不知何故错过了原始问题帖子中的这一部分。我意识到在

网络视图中包含所有内容是可能的，但这需要付出很大的努力。无论如何，谢谢你的邀请suggestion@danyloid是的，复杂的内容使它。。。复杂：）还有两个想法：1）使用Pivot，一个页面上的内容，另一个页面上的webview；2） 类似垂直轴的东西-你可以看到底部的webview，一旦你点击它，它几乎会全屏显示，顶部只有一些小东西，你可以从中返回到其他内容。谢谢，我没有考虑第二种方法。这可能不是最好的解决办法，尽管这是一个很好的选择。谢谢。我想这是最接近的一个。这是@tdmanutd解决方案的完整实现，我也面临同样的问题。我试试这个解决方案。谢谢你的帖子。@Ouadie LoadLink函数对我不起作用。链接未被单击。你有什么想法吗？@LovetoCode首先你必须检查你是否正确调用
等待这个.WebviewContent.InvokeScriptAsync（“loadLink”，size）
然后在javascript中使用
警报
或
控制台进行检查。记录
您是否正确收到了
加载链接
调用。
string htmlFragment = @"
                                    <html>
                                        <head>
                                        <meta name=""viewport"" content=""width="+width+@", initial-scale=1, user-scalable=no"" />
                                            <script type=""text/javascript"">
                                                function loadLink(x,y){
                                                window.external.notify('x='+x+'y='+y);
                                                var el = document.elementFromPoint(x, y);
                                                el.click();};                                                   
                                            </script>
                                        <style>
                                        " + CSS + @"
                                        </style>
                                        </head>
                                        <body onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
                                            <div id='content' style=""font-size:16px; color:#222222;"">" + original +
                                          @"</div>
                                        </body>
                                    </html>";

void WebviewContent_ScriptNotify(object sender, NotifyEventArgs e)
{
    if (e.Value.Contains("rendered_height"))
    {
        if (valuePair != null && valuePair[0] == "rendered_height")
        {
            double renderedHeight = double.Parse(valuePair[1]);                 
            WebviewContent.Height = renderedHeight;

        }
    }
 }

private async void RecWeb_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Point p = e.GetPosition(WebviewContent);
        int x = Convert.ToInt32(p.X);
        int y = Convert.ToInt32(p.Y);
        string[] size = { x.ToString(), y.ToString() };
        await WebviewContent.InvokeScriptAsync("loadLink",size);
    }