Windows 8.1 觸控操作開發指南：Manipulation 事件完整解析與實作

核心事件模型

Windows 8.1 應用透過 UIElement.ManipulationMode 啟用觸控操作，支援平移、縮放、旋轉三大手勢。五大事件形成完整生命週期：

1. ManipulationStarting：初始化設定 (如容器、模式)
2. ManipulationStarted：手勢開始
3. ManipulationDelta：手勢進行中 (核心邏輯處理)
4. ManipulationInertiaStarting：慣性動畫啟動 (鬆開手指後)
5. ManipulationCompleted：手勢結束

XAML 實作範例

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Canvas>
        <Image x:Name="imageElement"
               Source="images/cliff.jpg"
               Height="460" Width="758"
               Canvas.Left="300" Canvas.Top="150"
               ManipulationMode="All"
               ManipulationStarting="image_ManipulationStarting"
               ManipulationDelta="image_ManipulationDelta"
               ManipulationCompleted="image_ManipulationCompleted">
            <Image.RenderTransform>
                <CompositeTransform x:Name="imageCT" />
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Grid>

程式碼後端邏輯

private void image_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
    e.ManipulationContainer = this.imageElement; // 設定座標系容器
    e.Mode = ManipulationModes.All;              // 確認啟用所有模式
}

private void image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // 累加平移
    this.imageCT.TranslateX += e.Delta.Translation.X;
    this.imageCT.TranslateY += e.Delta.Translation.Y;

    // 累加縮放 (以元素中心為基準)
    this.imageCT.ScaleX *= e.Delta.Scale;
    this.imageCT.ScaleY *= e.Delta.Scale;

    // 累加旋轉
    this.imageCT.Rotation += e.Delta.Rotation;
}

private void image_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    // 可在此處理慣性結束後的邏輯，如吸附邊界
}

關鍵屬性解析

進階技巧

• 邊界限制：在 ManipulationDelta 中檢查 CompositeTransform 邊界，超出時修正或取消操作。
• 慣性自訂：於 ManipulationInertiaStarting 設定 e.TranslationBehavior.DesiredDeceleration 等調整停止行為。
• 多點觸控區分：利用 e.PointerDeviceType 或 e.IsInertial 區分手指/滑鼠/觸控筆。

總結

掌握 Manipulation 事件流與 CompositeTransform 累加邏輯，即可實作流暢、自然的觸控互動體驗。建議搭配 VisualStateManager 處理狀態轉換，提升程式碼可維護性。