Windows 8 Store Apps 開發實戰（50）：邊緣手勢、Manipulation 手勢操作、GestureRecognizer 手勢識別三大觸控核心

前言

Windows 8 觸控體驗建立在三大支柱：邊緣手勢 (系統選單喚起)、Manipulation (直接操作：平移/縮放/旋轉)、GestureRecognizer (語義識別：CrossSlide、Tap、Hold)。本文完整實作三者核心 API 與事件流程。

一、邊緣手勢：EdgeGesture

從螢幕邊緣向內滑動喚起 App Bar/Charms Bar。

var edgeGesture = EdgeGesture.GetForCurrentView();
edgeGesture.Starting += (s,e) => Log("EdgeGesture Starting");
edgeGesture.Completed += (s,e) => Log("EdgeGesture Completed");
edgeGesture.Canceled += (s,e) => Log("EdgeGesture Canceled");

// EdgeGestureEventArgs.Kind: Touch / Keyboard (Win+Z) / Mouse (右鍵)

二、Manipulation：直接操作 (平移/縮放/旋轉 + 慣性)

XAML 啟用完整操作模式

<Rectangle x:Name="rectangle" Width="200" Height="200" Fill="Orange"
           ManipulationMode="All" />

事件流程與矩陣變換

// 變換群組：先套用累積矩陣，再套用當前增量
_transformGroup = new TransformGroup();
_previousTransform = new MatrixTransform { Matrix = Matrix.Identity };
_compositeTransform = new CompositeTransform();
_transformGroup.Children.Add(_previousTransform);
_transformGroup.Children.Add(_compositeTransform);
rectangle.RenderTransform = _transformGroup;

void rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    _previousTransform.Matrix = _transformGroup.Value; // 累積
    var center = _previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y));
    _compositeTransform.CenterX = center.X;
    _compositeTransform.CenterY = center.Y;
    _compositeTransform.Rotation = e.Delta.Rotation;
    _compositeTransform.ScaleX = e.Delta.Scale;
    _compositeTransform.ScaleY = e.Delta.Scale;
    _compositeTransform.TranslateX = e.Delta.Translation.X;
    _compositeTransform.TranslateY = e.Delta.Translation.Y;
}

// 慣性設定範例 (ManipulationInertiaStarting)
e.TranslationBehavior.DesiredDeceleration = 0.001; // 位移減速
e.ExpansionBehavior.DesiredDeceleration = 0.0001;  // 縮放減速
e.RotationBehavior.DesiredDeceleration = 0.001;    // 旋轉減速

關鍵結構體**：

• ManipulationDelta：Translation (Point), Scale (double), Rotation (double), Expansion (double)。
• ManipulationVelocities：Linear (Point/ms), Angular (deg/ms), Expansion (dip/ms)。
• dip (device independent pixels)**：邏輯像素，480×320 基準，跨解析度一致。

三、GestureRecognizer：語義手勢識別 (以 CrossSlide 為例)

適用場景對比

CrossSlide 實作 (水平/垂直切換)

_gestureRecognizer = new GestureRecognizer();
_gestureRecognizer.GestureSettings = GestureSettings.CrossSlide; // 只啟用 CrossSlide
_gestureRecognizer.CrossSliding += (s, args) =>
    Log($"CrossSliding: {args.CrossSlidingState} at {args.Position}");

// Pointer 事件必須轉發給 GestureRecognizer
void Page_PointerPressed(object sender, PointerRoutedEventArgs e)
    => _gestureRecognizer.ProcessDownEvent(e.GetCurrentPoint(null));
void Page_PointerMoved(object sender, PointerRoutedEventArgs e)
    => _gestureRecognizer.ProcessMoveEvents(e.GetIntermediatePoints(null));
void Page_PointerReleased(object sender, PointerRoutedEventArgs e)
    => _gestureRecognizer.ProcessUpEvent(e.GetCurrentPoint(null));

// 切換方向
_gestureRecognizer.CrossSlideHorizontally = true;  // 水平
_gestureRecognizer.CrossSlideHorizontally = false; // 垂直

GestureSettings 旗標枚舉 (可組合)

Tap, DoubleTap, Hold, HoldWithMouse, RightTap,
Drag, CrossSlide,
ManipulationTranslateX, ManipulationTranslateY,
ManipulationTranslateRailsX, ManipulationTranslateRailsY,
ManipulationRotate, ManipulationScale,
ManipulationTranslateInertia, ManipulationRotateInertia, ManipulationScaleInertia

總結：觸控開發選型指南

1. 需即時視覺回饋的拖曳/縮放/旋轉 → Manipulation (UIElement 事件)。
2. 需語義判斷 (如 CrossSlide 選取多項、Hold 顯示內容選單) → GestureRecognizer。
3. 需系統級邊緣選單 整合 → EdgeGesture (僅監聽，不干涉)。
4. 兩者可共存：同一元素同時啟用 ManipulationMode 與轉發 Pointer 給 GestureRecognizer，分別處理直接操作與語義識別。

原始碼下載**：https://files.cnblogs.com/webabcd/Windows8.rar