Windows Phone 8.1 - 通过外部ScrollViewer元素处理WebView垂直滚动
dan*_*oid 20 c# xaml webview windows-phone windows-phone-8.1
问题
我必须在Windows Phone 8.1应用程序中显示一个WebView内部ScrollViewer,具有以下要求:
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>
我尝试了什么
测量HTML内容并调整WebView高度 - 这部分工作,通过几次调整,我能够为WebView元素设置正确的高度.
订阅WebView中的Border元素 - 没有用.这里的问题是,在Windows Phone 8.1中,WebView组件似乎没有可视化的子项(至少没有DependencyObject)
我也试过玩ManupulationMode和IsHitTestVisible属性没有成功.
更新
为所需WebView功能添加了文本选择和复制按钮.不知何故在原始问题内容中错过了它.
小智 5
我一直在面对这个问题,我得到了部分解决方法(不包括文本选择).
基本上,为了能够使用包含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>
现在我们需要注入一些css和javascript来使webview高度适应内容(我在另一个stackoverflow线程上找到了一些代码示例,忘记跟踪它来自哪里)
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通知事件以确定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;
}
}
}
我设法允许此解决方案能够使用此方法(loadLink javascript方法)单击内容中的某些链接:
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中查找等效的事件处理程序.
Chr*_*ado -1
您是否尝试将 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>
| 归档时间： |
|
| 查看次数： |
2020 次 |
| 最近记录： |