【发布时间】：2015-05-21 08:20:51
【问题描述】：
我正在创建一个 Windows Phone 8.1（RT，而不是 silverlight）新闻阅读器应用程序。我们的客户给了我们一个 API，新闻内容使用的是 html 标签。这种方法导致我们使用 WebView 来呈现内容。
在新闻阅读器页面中，有相关内容将放置在 webview 下方。在这种情况下，我认为我无法使用 WebView 滚动条导航到 webview 下方的相关文章。在 Stackoverflow 中浏览了一番后，我找到了一些解决此问题的方法。
这是布局的代码示例：
<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>
我在 webview 中使用矩形作为覆盖，因此用户可以使用 scrollviewer 滚动。我还在从 API 返回的每个 html 字符串中添加一个 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:" + AppManager.Instance.CurrentSetting.FontOption + @"px; color:#222222;"">" + original +
@"</div>
</body>
</html>";
并添加了 webview webscript 通知事件以确定 webview（和矩形）的呈现高度：
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 的某些部分（奇怪的是长内容的中间部分被渲染了）。
截图在这里：http://imgur.com/170p7gN
有什么解决方法吗？或者，如果您有其他解决方案来处理这种情况（标题、html 内容和 html 内容下方的网格），请告诉我。
谢谢
【问题讨论】：
标签： c# windows-phone windows-phone-8.1