gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 04:39:49 26 4
gpt4 key购买 nike

问题

我必须在 Windows Phone 8.1 应用程序的 ScrollViewer 中显示一个 WebView,并满足以下要求:

  1. WebView 高度应根据其内容进行调整。
  2. WebView 垂直滚动应由外部 ScrollViewer 处理。
  3. WebView 应处理水平滚动、缩放(双指缩放)、文本选择(使用默认复制按钮)和链接导航。

下图是我模拟的布局(左侧)和类似功能的最佳示例——内置邮件应用程序(右侧)

My page layout (to the left) and example of similar functionality (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>

我尝试了什么

Measure HTML content and adjusting the WebView height - 这部分有效,通过多次调整,我能够为 WebView 元素设置正确的高度。

Subscribing to a Border element inside a WebView - 无效。这里的问题是,在 Windows Phone 8.1 中,WebView 组件似乎没有视觉子项(至少没有 DependencyObject 的)

我也尝试过使用 ManupulationModeIsHitTestVisible 属性,但没有成功

更新为所需的 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>

现在我们需要注入(inject)一些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 notify事件来确定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 中找到等效的事件处理程序。

关于c# - Windows Phone 8.1 - 通过外部 ScrollViewer 元素处理 WebView 垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30705584/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com