解决在Windows Phone中的WebBrowser控件中的zoom和ScrollViewer滑动冲突(译)

解决在Windows Phone中的WebBrowser控件中的zoom和ScrollViewer的滑动冲突


这篇博文主要是描述了一个解决在Windows Phone中的WebBrowser控件中的zoom和ScrollViewer滑动冲突的helper类。


Windows Phone 7应用的开发者可以通过使用Webbrowser控件使用在IE9中的拥有的所有功能。该空间允许开发者在程序中呈现本地或者远程的HTML和JavaScript内容。你会发现这个控件比较多的应用与RSS阅读器,这些网页内容可以在程序中良好的呈现而不用再去启动IE浏览器(PS:在Windows Phone中启动IE是要利用启动器的)。WebBrowser也可以用于基于HTML5的应用程序,例如: Property Finder, the PhoneGap-based application I developed recently


现在我们在使用WebBrowser时,常常碰到的一个问题是:怎么样去处理好manipulation事件。

举个例子,在开发过程中遇到了这样一种情况:在Pivot控件里放了一个WebBrowser控件,怎么样去判断和处理横向的滑动手势是要根据Pivot做切换还是用根据WebBrowser做页面内容的移动呢?


在HTML5应用程序中,你可以通过对元数据viewport的设置来对浏览器的评议和缩放做一些控制,例如以下代码就是禁止浏览器的滑动行为:

<meta name="viewport" content="user-scalable=no" />


通过添加上面的meta-tag到HTML页面虽然可以禁止用户使用Pinch手势时页面进行缩放,当时不管怎么说都是一个很完美的解决方法。因为用户还是能缩放页面,只不过是当他们释放手指时,又还原到原来的尺寸罢了。

 

解决方法

我最初以为暂时应该是没有办法去控制WebBrowser控件的行为,它毕竟是围绕着本地控制被.Net包裹着。但是我偶让发现quetzalcoatl 在StackOverflow上的一些回答,quetzalcotl对WebBrowser包裹的.Net层进行了深入的挖掘,发现了一个有趣的控件---PanZoomContainer。


如果你检查过WebBrowser的可视化树,你会发现下面的结构:

\-WebBrowser
  \-Border
    \-Border
      \-PanZoomContainer
        \-Grid
          \-Border (*)
            \-ContentPresenter
              \-TileHost

(可视化转换同样是用了Colin Eberhardt写的一个非常有用的工具-Linq to VisualTree )

 


这棵可视化树的结构很简单,由一些Grid和Border组成。此中最重要的要属TileHost,他是本地IE9的组件(当然PanZoomContainer也是)。实际上TileHost比不处理手势触发的事件,而是由PanZoomContainer处理的。PanZoomContainer把这些事件转换成手势(如:缩放),并把结果返回给TileHost。


这就意味着我们可以阻止manipulation事件继续传递到PanZoomContainer,并在它们转换为手势前取消它们。

这个Utility类主要是处理这些事件链接到Border上。由于这些事件就被取消了,当事件接收各种的判断条件时通过这些条件可以判断出平移和滑动。


这个类的源码贴在这里:

using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using LinqToVisualTree;
using Microsoft.Phone.Controls;
 
/// <summary>
/// Suppresses pinch zoom and optionally scrolling of the WebBrowser control
/// </summary>
public class WebBrowserHelper
{
  private WebBrowser _browser;
 
  /// <summary>
  /// Gets or sets whether to suppress the scrolling of
  /// the WebBrowser control;
  /// </summary>
  public bool ScrollDisabled { get; set; }
 
  public WebBrowserHelper(WebBrowser browser)
  {
    _browser = browser;
    browser.Loaded += new RoutedEventHandler(browser_Loaded);
  }
 
  private void browser_Loaded(object sender, RoutedEventArgs e)
  {
    var border = _browser.Descendants<Border>().Last() as Border;
 
    border.ManipulationDelta += Border_ManipulationDelta;
    border.ManipulationCompleted += Border_ManipulationCompleted;
  }
 
  private void Border_ManipulationCompleted(object sender,
                                            ManipulationCompletedEventArgs e)
  {
    // suppress zoom
    if (e.FinalVelocities.ExpansionVelocity.X != 0.0 ||
        e.FinalVelocities.ExpansionVelocity.Y != 0.0)
      e.Handled = true;
  }
 
  private void Border_ManipulationDelta(object sender,
                                        ManipulationDeltaEventArgs e)
  {
    // suppress zoom
    if (e.DeltaManipulation.Scale.X != 0.0 ||
        e.DeltaManipulation.Scale.Y != 0.0)
      e.Handled = true;
 
    // optionally suppress scrolling
    if (ScrollDisabled)
    {
      if (e.DeltaManipulation.Translation.X != 0.0 ||
        e.DeltaManipulation.Translation.Y != 0.0)
        e.Handled = true;
    }
  }
}

 

在属性范围内查找,在我的HTML5应用程序中,当用户从一个页面跳转到下一个页面时,JavaScript代码可以设置通过设置上述helper类的ScrollDisabled属性,从而通知Silverlight容器是否当前界面启用了滑动。


我希望这个简单的Utility类对大家能有帮助,只需要复制这段代码到你的应用程序中就行了。Note,这里使用到了Linq to VisualTree浏览WebBrowser的可视化树,因此你也需要到这里去了解Linq to VisualTree的相关信息。


原文作者:November 17th, 2011 by Colin Eberhardt

原文地址:Suppressing Zoom and Scroll interactions in the Windows Phone 7 WebBrowser Control

转载于:https://www.cnblogs.com/navigator/archive/2012/01/03/2917682.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值