WPF 4 多點觸控操作事件深度解析：Manipulation 事件實戰

多點觸控從科幻走向主流

Windows 7 將多點觸控支援滲透至 .NET Framework 各層。WPF 4 提供兩層介面：

• 低階觸控事件：TouchDown/Move/Up/Enter/Leave（對應滑鼠事件，含觸控點 ID 追蹤）。
• 高階操作事件：以 Manipulation 開頭，自動融合多指交互、解析平移/縮放/旋轉、支援慣性與邊界回饋。

Silverlight 4 本身不支援，但 Windows Phone 7 的 Silverlight 支援；Web 版 Silverlight 仍用 Touch.FrameReported。

核心操作事件一覽

UIElement 提供對應虛擬方法（OnManipulationStarting 等），WP7 則在 Control 類別定義。

範例：可拖曳、縮放、旋轉的相片檢視器

XAML 關鍵點

<Image Source="..." IsManipulationEnabled="True"
  RenderTransform="0.5 0 0 0.5 100 100" />

• IsManipulationEnabled="True"：啟用元素操作事件（預設關閉）。
• RenderTransform：六值字串初始化 MatrixTransform（縮放 0.5、平移 100,100）。
• 操作事件為路由事件，父容器（Grid/Window）無需啟用即可捕獲。

代碼隱藏：僅覆寫兩個方法

protected override void OnManipulationStarting(ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;                 // 統一座標系至視窗
    // Z-Order 置頂被操作元素
    var fe = e.Source as FrameworkElement;
    var panel = fe.Parent as Panel;
    for (int i = 0; i < panel.Children.Count; i++)
        Panel.SetZIndex(panel.Children[i],
            panel.Children[i] == fe ? panel.Children.Count : i);
    e.Handled = true;
    base.OnManipulationStarting(e);
}

protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
{
    var el = e.Source as UIElement;
    var xform = el.RenderTransform as MatrixTransform;
    var matrix = xform.Matrix;
    var delta = e.DeltaManipulation;
    var center = e.ManipulationOrigin;

    matrix.ScaleAt(delta.Scale.X, delta.Scale.Y, center.X, center.Y);
    matrix.RotateAt(delta.Rotation, center.X, center.Y);
    matrix.Translate(delta.Translation.X, delta.Translation.Y);
    xform.Matrix = matrix;

    e.Handled = true;
    base.OnManipulationDelta(e);
}

順序：縮放 → 旋轉 → 平移。ManipulationOrigin 相對於 ManipulationContainer。

關鍵概念深度剖析

ManipulationContainer

預設為來源元素，但動態操作同一元素會導致座標系抖動。ManipulationStarting 階段可重設為父容器（如視窗），後續事件座標皆相對於該容器，交互更穩定。

DeltaManipulation 與 CumulativeManipulation

• Translation (Vector)：平移位移。
• Scale (Vector)：乘法縮放，X/Y 同值（WPF 4 同向縮放）。
• Expansion (Vector)：加法縮放，調整 Width/Height。
• Rotation (double)：旋轉角度（徑度）。

雙指操作可同時產生平移、縮放、旋轉。

同時操作多元素

每個 IsManipulationEnabled 元素獨立產生事件序列，透過 e.Source 辨識。切勿在欄位保存單一元素狀態，否則無法支援多點並行操作。

容器啟用 vs 元素啟用

容器啟用需在 ManipulationStarted 做點擊測試並儲存目標元素，限制同時僅能操作一個元素。元素級啟用更靈活、支援並行。

進階功能

操作模式

ManipulationModes 列舉限制操作類型（如僅水平平移），ManipulationModesDemo 示範動態切換。

單指旋轉

設定 ManipulationStartingEventArgs.Pivot：

var center = new Point(el.ActualWidth/2, el.ActualHeight/2);
center = el.TranslatePoint(center, this);           // 轉至容器座標
e.Pivot = new ManipulationPivot(center, 48);        // 半徑 48 DIP 內不旋轉

手指置於元素邊緣即可單指旋轉+平移，體驗逼真。

延伸工具包

Surface Toolkit for Windows Touch 提供觸控優化控件（如 ScatterView），內建操作照片等常用行為，減少直接處理事件。

原始碼下載：https://code.msdn.microsoft.com/mag201008UF