的Windows Phone 8.1 - 通过外的ScrollViewer元素处理的WebView垂直滚动 [英] Windows Phone 8.1 - Handle WebView vertical scroll by outer ScrollViewer element
问题描述
我要表现出的WebView 在的ScrollViewer 中的Windows Phone 8.1的应用程序，具有下列要求：
I have to show a WebView inside a ScrollViewer in Windows Phone 8.1 application, with the following requirements:
-
的WebView高度应根据它的内容进行调整。 -
的WebView垂直滚动应处理外的ScrollViewer。 -
的WebView应该处理横向滚动，缩放（捏缩放），文本选择（默认复印按钮）和链接导航。
WebViewheight should be adjusted based on its content.WebViewvertical scroll should be handled by an outerScrollViewer.WebViewshould handle horizontal scroll, scale (pinch-zoom), text selection (with the default copy button) and links navigation.
在下面的图片是我的嘲笑布局（左侧）和类似的功能最好的例子 - 这将是一个内置的邮件申（右）
On the picture below is my mocked layout (to the left) and the best example of similar functionality - that would be a built-in mail application (to the right)
样品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>
什么我尝试
<一个HREF =http://stackoverflow.com/questions/12727041/detecting-webview-height-via-scrolling-in-xaml>测量HTML内容和调整的WebView高度 - 这部分的工作并与一些调整，我能够设置正确的高度与的WebView 元素。
What did I try
Measure HTML content and adjusting the WebView height - This part worked and with several adjustments I was able to set the correct height to the WebView element.
<一个HREF =http://stackoverflow.com/questions/16787331/windows-phone-avoid-scrolling-of-web-browser-control-placed-inside-scroll-view>订阅边框元素的WebView <内部/ A> - 没有工作。这里的问题是，在Windows Phone的8.1似乎是一个的WebView 组件没有视觉的孩子（至少不是的DependencyObject 的）
Subscribing to a Border element inside a WebView - Did not work. The problem here is that in Windows Phone 8.1 it seems that a WebView component does not have visual children (at least not DependencyObject's)
除了我试着 ManupulationMode 和 IsHitTestVisible 是没有成功的属性
更新
添加文本选择和放大器;复制按钮所需的WebView 功能。不知怎的，错过了在原来问题的内容。
UPDATE
Added text selection & copy button to required WebView functionality. Somehow missed it in the original question content.
推荐答案
我已经面临这个问题，我也得到了一些解决方法部分（不包括文本选择）。
I've been facing this problem, and i got some workaround partially (excluding the text selection).
基本上就能够使用含有web视图，你需要的东西被拖动的ScrollViewer中，所以我用一个矩形的高度和宽度相同的WebView。
Basically to be able to use the scrollviewer containing the webview, you need something to be dragged, so I use a rectangle with the height and width same as the 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>
现在我们需要注入一些CSS和JavaScript，使网页视图高度适应的内容（我发现在另一个计算器线程一些代码示例，忘记追踪来自何处）
Now we need to inject some css and javascript to make the webview height adapting to the content (I found some code example on another stackoverflow thread, forget to track where it comes from)
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>";
然后添加的WebView webscript通知事件，以确定渲染web视图（和矩形）的高度：
Then added webview webscript notify event to determine the rendered height of the webview (and rectangle):
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;
}
}
}
我设法让这个解决方案能够点击的内容有些链接使用此方法（loadLink JavaScript方法）：
I manage to allow this solution to be able to click some link in the content using this method (the loadLink javascript method):
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);
}
也许你可以把它从那里添加事件处理程序为您选择的文本问题。采用该解决方案的点也发现在JavaScript等效事件处理程序。
Maybe you can take it from there to add an event handler for your selecting text problem. The point using this solution is also to find an equivalent event handler in javascript.
这篇关于的Windows Phone 8.1 - 通过外的ScrollViewer元素处理的WebView垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
