的Windows Phone 8.1的动态视图内容的ScrollViewer带 [英] Windows Phone 8.1 dynamic WebView content with scrollviewer
问题描述
我创建的Windows Phone 8.1（RT，不是Silverlight的）新闻阅读器应用程序。我们的客户给了我们的API，并使用HTML标记的新闻内容。这种做法导致我们使用的WebView呈现的内容。
I am creating a Windows Phone 8.1 (RT, not silverlight) news reader app. Our client gave us an API and the news content are using html tag. This approach lead us to use the WebView to render the content.
在新闻阅读器页面，有相关的，将被放置在网页视图下面的内容。有了这个条件，我想我不能使用的WebView滚轮导航到网页视图下面的相关文章。在＃1一番浏览后，我发现了一些办法解决这个问题。
In the news reader page, there are related content that will be placed below the webview. With this condition, I think I cannot use the WebView scroller to navigate to related article below the webview. After some browsing in Stackoverflow, i found some workaround for this problem.
下面是布局的代码示例：
here are the code sample for the layout:
<Grid Name="MainGrid" Margin="0,-30,0,0">
<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>
</Grid>
即时通讯使用矩形作为web视图叠加使用户可以滚动使用的ScrollViewer。
Im using rectangle as overlay in webview so user can scroll using scrollviewer. I'm also adding a javascript in each of html string returned from API:
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:" + AppManager.Instance.CurrentSetting.FontOption + @"px; color:#222222;"">" + original +
@"</div>
</body>
</html>";
和添加web视图webscript通知事件，以确定
and added the 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;
}
}
}
本解决方案的工作大部分时间较短的内容，但在主要问题是，每当一些长期内容（约5000以上像素的WebView高度）渲染，上面会有一些部件（奇怪的长内容的中间部分被渲染），我的矩形/的WebView一些奇怪的白色层。
This solution work most of the times in shorter content, but the main problem are whenever some long content (approx above 5000 pixels WebView height) rendered, there will be some odd white layer above my rectangle/WebView in some parts (strangely the middle part of the long content are rendered).
该截图是在这里： http://imgur.com/170p7gN
The screenshot is here: http://imgur.com/170p7gN
是否对此有任何解决方法吗？或者，也许，如果你有另一种解决方案来处理这种情况（头，HTML内容和电网HTML内容如下），请告诉我。
Are there any workaround for this? Or maybe if you have another solution to handle this condition (header, html content, and grid below the html content), please advise me.
感谢
推荐答案
在我的设备和模拟器测试后，这种怪异的行为的可重现在以下设备：
After testing in my devices and emulator, this weird behavior can be reproduce in following device:
- 的Lumia 920的Windows Phone 8.1（RAM为1GB）
- 模拟器8.1 WVGA的4英寸512 MB
- 模拟器8.1 WVGA 4英寸
- 模拟器8.1 WXGA 4.5英寸
- 模拟器8.1 720P的4.7英寸
- 的Lumia 520的Windows Phone 8.1
- Lumia 920 with Windows Phone 8.1 (1GB of ram)
- Emulator 8.1 WVGA 4 inch 512 MB
- Emulator 8.1 WVGA 4 inch
- Emulator 8.1 WXGA 4.5 inch
- Emulator 8.1 720P 4.7 inch
- Lumia 520 with Windows Phone 8.1
在以下设备中的WebView 显示的内容通常
The webview show the content normally in following device:
- 的Lumia 730与Windows Phone的10技术预览版
- 的Lumia 920的Windows Phone 10技术预览版
- 的Lumia 930的Windows Phone 8.1（2GB的RAM）
- 模拟器8.1 1080P（包括5.5和6英寸，走我的电脑内存2GB ）
- Lumia 730 with Windows Phone 10 Tech Preview
- Lumia 920 with Windows Phone 10 Tech Preview
- Lumia 930 with Windows Phone 8.1 (2GB of RAM)
- Emulator 8.1 1080P (both 5.5 and 6 inch, and Take 2GB of My PC RAM)
看起来这是微软双方是不可思议的错误。您需要在WP 8.1或Windows 10或者网页视图大RAM（2GB）。希望它可以提供帮助。
Seems like this is a bug from Microsoft sides which is weird. You need either big ram (2GB) in WP 8.1 or Windows 10 Webview. Hope it can help.
这篇关于的Windows Phone 8.1的动态视图内容的ScrollViewer带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
