Windows PhoneのWebBrowserコントロールにおけるzoomとSrollViewerの滑り衝突を解決します.


Windows PhoneのWebBrowserコントロールにおけるzoomとSrollViewerの滑り衝突を解決します.
このブログは主にWindows PhoneのWebBrowserコントロールにおけるzoomとSrollViewerの滑り衝突を解決するhelper類を述べている.
Windows Phone 7アプリケーションの開発者は、IE 9の所有するすべての機能をWebrowswerコントロールを使用して使用することができます.この空間は、開発者がプログラムにローカルまたはリモートのHTMLおよびJavaScriptの内容を提示することを可能にする.このコントロールの多いアプリケーションとRSSリーダーを発見します.これらのウェブページの内容は、IEブラウザを起動することなくプログラムにおいて良好に表示されます.WebBrowserは、HTML 5に基づくアプリケーション、例えば、 Property Finder,the Phone Gap-based aplication I developed recently.
今私たちはWebBrowserを使っていますが、よくある問題はどのようにmanipulation事件を処理したらいいですか?
例えば、PivotコントロールにWebBrowserコントロールが置かれていますが、横方向のスライドジェスチャーはPivotによって切り替えますか?それともWebBrowserによってページ内容の移動をしますか?
HTML 5アプリケーションでは、メタデータviewportの設定によってブラウザの評価とスケーリングを制御できます.例えば、以下のコードはブラウザのスライド行為を禁止します.
<meta name="viewport" content="user-scalable=no" />
上記のmeta-を追加することにより、Pinchジェスチャーを使用する際のページのスケーリングは禁止されますが、当時はとにかく完璧な解決方法でした.まだユーザーがページを拡大・縮小できるのは、指を離す時に元のサイズに戻すだけです.
解決方法
最初はしばらくWebBrowserコントロールをコントロールできないと思っていましたが、やはりローカルコントロールを巡ってネットに包まれています.でも、私はquetzal coatを発見させました. StockOverflowでのいくつかの回答において、quetzal cotlはWebBrowserの小包のネット層を深く掘り下げて、面白いコントロール---PanZoomContinerを発見しました.
WebBrowserの可視化ツリーをチェックしたら、次の構造が分かります.
\-WebBrowser
  \-Border
    \-Border
      \-PanZoomContainer
        \-Grid
          \-Border (*)
            \-ContentPresenter
              \-TileHost
( も じように されています.
Colin Eberhardは に なツールであるLinq to Visual Treeを いています. )
この ツリーの は で、いくつかのGridとBorderからなります. も なのはTileHostです. は のIE 9のコンポーネントです.(もちろん、PanZoomContinerも). にTileHostはジェスチャートリガのイベントを しないで、PanZoomContinerによって されます.PanZoomContinerはこれらのイベントをジェスチャーに してHolestに ります.
これは、 たちがmanipulationイベントを してPanZoomContinerに し け、ジェスチャーに する にキャンセルすることを します.
この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;
    }
  }
}

で して、 のHTML 5アプリケーションにおいて、ユーザが つのページから のページにジャンプした 、JavaScriptコードは helper のScrrollDispable を することにより、Silverlight が のインターフェースでスリップしているかどうかを することができます.
この なUtility が さんの に つことを んでいます.このコードをあなたのアプリケーションにコピーすればいいです.Note、ここでLinq to Visual TreeブラウズWebBrowserの ツリーを っていますので、ここでLinq to Visual Treeに する を る があります.
November 17 th、2011 by Colin Eberhard t
Suppresing Zoom and Sroll interactions in the Windows Phone 7 WebBrowser Control