在上一篇中我們對(duì)基礎(chǔ)觸控操作有了初步了解，本篇將繼續(xù)介紹觸碰控制的高級(jí)操作（Manipulatioin），在高級(jí)操作中包含了一些特殊的觸屏手勢(shì)：平移、縮放、旋轉(zhuǎn)，當(dāng)然在WPF 中無(wú)需自行開發(fā)這些手勢(shì)，只需將UI 控件的IsManipulationEnabled 屬性激活，并通過以下四種事件完成各種觸屏手勢(shì)操作：ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted，下圖為各事件之間的工作順序及關(guān)系。

　　創(chuàng)建項(xiàng)目

　　新建項(xiàng)目在XAML 程序中寫入下面代碼，為<Canvas>設(shè)置ManipulationStarting、ManipulationDelta、ManipulationCompleted 事件，并在其中添加三張圖片，將Image 的IsManipulationEnabled 屬性均為"True"，同時(shí)所有的Image 都添加了<MatrixTransform>對(duì)象，用于組合平移、縮放、旋轉(zhuǎn)操作。

<Window x:Class="WpfManipulation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="600">
    <Grid>
        <Canvas x:Name="touchPad" Background="Gray"                
                ManipulationStarting="image_ManipulationStarting"  
                ManipulationDelta="image_ManipulationDelta"
                ManipulationCompleted="image_ManipulationCompleted">
            <Image Canvas.Top="52" Canvas.Left="34" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P1.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
            <Image Canvas.Top="75" Canvas.Left="339" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P2.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
            <Image Canvas.Top="243" Canvas.Left="168" Width="200" 
                   IsManipulationEnabled="True" Source="Images/P3.jpg">
                <Image.RenderTransform>
                    <MatrixTransform></MatrixTransform>
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
</Window>

　　當(dāng)觸碰到Image 圖片時(shí)，image_ManipulationStarting 事件將會(huì)自動(dòng)觸發(fā)，首先需要定義ManipulationContainer（即為touchPad<Canvas>），該容器的主要用于定義參考坐標(biāo)，圖片的任何操作均以參考坐標(biāo)為準(zhǔn)。ManipulationModes 設(shè)置可以限制哪些手勢(shì)操作是程序允許的，如果沒有特殊情況可設(shè)置為"All"。

private void image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = touchPad;
    e.Mode = ManipulationModes.All;
}

　　ManipulationDelta 事件會(huì)在手勢(shì)操作開始時(shí)觸發(fā)，并且該手勢(shì)需持續(xù)進(jìn)行不得間斷。通過FrameworkElement 獲得接受操作的圖片控件，將圖片透明度降低到0.5，創(chuàng)建Matrix 用于控制圖片MatrixTransform，利用Point 獲得圖片中心坐標(biāo)點(diǎn)，通過ScaleAt、RotateAt、Translate 執(zhí)行縮放、旋轉(zhuǎn)、平移操作。

private void image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    FrameworkElement element = (FrameworkElement)e.Source;
    element.Opacity = 0.5;

    Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix;

    var deltaManipulation = e.DeltaManipulation;
    
    Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
    center = matrix.Transform(center);

    matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y);

    matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);

    matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);

    ((MatrixTransform)element.RenderTransform).Matrix = matrix;
}

　　最后，當(dāng)手指離開觸摸屏即操作結(jié)束，image_ManipulationCompleted 事件觸發(fā)，將圖片透明度重新調(diào)整為1。

private void image_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    FrameworkElement element = (FrameworkElement)e.Source;
    element.Opacity = 1;
}

　　程序演示

　　相關(guān)文章

　　1. WPF Multi-Touch 開發(fā)：Windows 7 安裝多點(diǎn)觸屏模擬器
　　2. WPF Multi-Touch 開發(fā)：基礎(chǔ)觸屏操作（Raw Touch）

　　源碼下載：WpfManipulation.zip

NET技術(shù)：WPF Multi-Touch 開發(fā)：高級(jí)觸屏操作（Manipulation），轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。