WPF 多點觸控開發：高效率開發模式（Behavior 方式）

痛點回顧

前幾篇介紹的手寫 Manipulation 事件方式，不僅程式碼冗長，還需自行處理邊界限制、慣性參數調整等細節。本文介紹 CodePlex Multi-Touch Manipulation 專案提供的 Blend Behavior，讓開發者純 XAML 即可賦予元素完整觸控操作（平移、縮放、旋轉、慣性、邊界約束）。

環境準備

1. 下載並安裝 Multi-Touch Manipulation。
2. 開啟 Blend 4，新建 WPF 專案。
3. 在設計介面繪製一個 Rectangle。

套用 Behavior

在 Assets → Behaviors 中找到並拖曳至 Rectangle：

• TranslateZoomRotateBehavior：啟用平移、縮放、旋轉。
• FluidMoveBehavior：設定移動動畫緩動效果。

屬性設定

TranslateZoomRotateBehavior

• 勾選 ConstrainToParentBounds → 防止元素超出容器邊界。

FluidMoveBehavior

• Duration：動畫持續時間（如 0:0:2）。
• EaseX/EaseY：設定 BackEase 等緩動函數。

生成的 XAML

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="https://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="https://schemas.microsoft.com/expression/2010/interactions"
    x:Class="WpfMT.MainWindow" Title="MainWindow" Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="#FF7E7E7E">
        <Rectangle Fill="#FF0B3EDA" Margin="239,181,289,179" Stroke="Black">
            <i:Interaction.Behaviors>
                <ei:TranslateZoomRotateBehavior ConstrainToParentBounds="True"/>
                <ei:FluidMoveBehavior Duration="0:0:2">
                    <ei:FluidMoveBehavior.EaseY>
                        <BackEase EasingMode="EaseOut"/>
                    </ei:FluidMoveBehavior.EaseY>
                    <ei:FluidMoveBehavior.EaseX>
                        <BackEase EasingMode="EaseOut"/>
                    </ei:FluidMoveBehavior.EaseX>
                </ei:FluidMoveBehavior>
            </i:Interaction.Behaviors>
        </Rectangle>
    </Grid>
</Window>

優勢總結

• 零程式碼：純標記語言完成複雜觸控邏輯。
• 設計師友善：Blend 可視化調整參數，所見即所得。
• 跨平台：同一組 Behavior 支援 WPF、Silverlight、Windows Phone 7。
• 內建邊界與慣性：無需手寫碰撞檢測與物理參數。

適用情境

快速原型、觸控展示應用、互動式簡報、教育軟體等需快速實作多點觸控操作的專案。