逐步解說：建立您的第一個觸控應用程式

發行項
08/12/2011

WPF 可讓應用程式回應觸控。例如，您可以在觸控感應裝置 (例如觸控螢幕) 上使用一或多根手指與應用程式進行互動。本逐步解說會建立可讓使用者透過觸控方式移動、調整大小或旋轉單一物件的應用程式。

必要條件

您需要下列元件才能完成此逐步解說：

Microsoft Visual Studio 2010。
Windows 7。
接受支援 Windows Touch 之觸控輸入的裝置，例如觸控螢幕。

此外，您應該對於如何在 WPF 中建立應用程式有基本的了解，尤其是訂閱和處理事件。如需詳細資訊，請參閱逐步解說：WPF 使用者入門。

建立應用程式

若要建立應用程式

在 Visual Basic 或 Visual C# 中，建立名為 BasicManipulation 的新 WPF 應用程式專案。如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

以下列 XAML 取代 MainWindow.xaml 的內容。

這個標記會建立簡單的應用程式，其中 Canvas 上包含紅色的 Rectangle。 Rectangle 的 IsManipulationEnabled 屬性設定為 true，因此將會接收操作事件。應用程式會訂閱 ManipulationStarting、ManipulationDelta 和 ManipulationInertiaStarting 事件。這些事件包含在使用者操作 Rectangle 時將它移動的邏輯。

<Window x:Class="BasicManipulation.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="Move, Size, and Rotate the Square"
        WindowState="Maximized"
        ManipulationStarting="Window_ManipulationStarting"
        ManipulationDelta="Window_ManipulationDelta"
        ManipulationInertiaStarting="Window_InertiaStarting">
  <Window.Resources>

    <!--The movement, rotation, and size of the Rectangle is 
        specified by its RenderTransform.-->
    <MatrixTransform x:Key="InitialMatrixTransform">
      <MatrixTransform.Matrix>
        <Matrix OffsetX="200" OffsetY="200"/>
      </MatrixTransform.Matrix>
    </MatrixTransform>

  </Window.Resources>

  <Canvas>
    <Rectangle Fill="Red" Name="manRect"
                 Width="200" Height="200" 
                 RenderTransform="{StaticResource InitialMatrixTransform}"
                 IsManipulationEnabled="true" />
  </Canvas>
</Window>

如果您是使用 Visual Basic，則請將 MainWindow.xaml 的第一行中的 x:Class="BasicManipulation.MainWindow" 取代為 x:Class="MainWindow"。

在 MainWindow 類別中加入下列 ManipulationStarting 事件處理常式。

ManipulationStarting 事件會在 WPF 偵測到控輸入開始操作物件時發生。程式碼會透過設定 ManipulationContainer 屬性的方式，指定操作的位置應該相對於 Window。

Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
    e.ManipulationContainer = Me
    e.Handled = True
End Sub

void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    e.ManipulationContainer = this;
    e.Handled = true;
}

在 MainWindow 類別中加入下列 ManipulationDelta 事件處理常式。

ManipulationDelta 事件會在觸控輸入變更位置時發生，而且可能在操作期間多次發生。此事件也可能在手指提起時發生。例如，如果使用者拖曳手指橫跨螢幕，ManipulationDelta 事件會在手指移動時發生多次。當使用者從螢幕提起手指時，ManipulationDelta 事件會繼續發生以模擬慣性。

程式碼會將 DeltaManipulation 套用至 Rectangle 的 RenderTransform，以便隨著使用者移動觸控輸入而移動。程式碼還會在慣性期間事件發生時，檢查 Rectangle 是否在 Window 的界限之外。如果是的話，應用程式會呼叫 ManipulationDeltaEventArgs.Complete 方法結束操作。

Private Sub Window_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs)

    ' Get the Rectangle and its RenderTransform matrix.
    Dim rectToMove As Rectangle = e.OriginalSource
    Dim rectTransform As MatrixTransform = rectToMove.RenderTransform
    Dim rectsMatrix As Matrix = rectTransform.Matrix


    ' Rotate the shape
    rectsMatrix.RotateAt(e.DeltaManipulation.Rotation,
                         e.ManipulationOrigin.X,
                         e.ManipulationOrigin.Y)

    ' Resize the Rectangle. Keep it square 
    ' so use only the X value of Scale.
    rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X,
                        e.DeltaManipulation.Scale.X,
                        e.ManipulationOrigin.X,
                        e.ManipulationOrigin.Y)

    'move the center
    rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                          e.DeltaManipulation.Translation.Y)

    ' Apply the changes to the Rectangle.
    rectTransform = New MatrixTransform(rectsMatrix)
    rectToMove.RenderTransform = rectTransform

    Dim container As FrameworkElement = e.ManipulationContainer
    Dim containingRect As New Rect(container.RenderSize)

    Dim shapeBounds As Rect = rectTransform.TransformBounds(
                                New Rect(rectToMove.RenderSize))

    ' Check if the rectangle is completely in the window.
    ' If it is not and intertia is occuring, stop the manipulation.
    If e.IsInertial AndAlso Not containingRect.Contains(shapeBounds) Then
        e.Complete()
    End If

    e.Handled = True
End Sub

void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{

    // Get the Rectangle and its RenderTransform matrix.
    Rectangle rectToMove = e.OriginalSource as Rectangle;
    Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix;

    // Rotate the Rectangle.
    rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, 
                         e.ManipulationOrigin.X, 
                         e.ManipulationOrigin.Y);

    // Resize the Rectangle.  Keep it square 
    // so use only the X value of Scale.
    rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, 
                        e.DeltaManipulation.Scale.X, 
                        e.ManipulationOrigin.X,
                        e.ManipulationOrigin.Y);

    // Move the Rectangle.
    rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
                          e.DeltaManipulation.Translation.Y);

    // Apply the changes to the Rectangle.
    rectToMove.RenderTransform = new MatrixTransform(rectsMatrix);

    Rect containingRect =
        new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);

    Rect shapeBounds =
        rectToMove.RenderTransform.TransformBounds(
            new Rect(rectToMove.RenderSize));

    // Check if the rectangle is completely in the window.
    // If it is not and intertia is occuring, stop the manipulation.
    if (e.IsInertial && !containingRect.Contains(shapeBounds))
    {
        e.Complete();
    }


    e.Handled = true;
}

在 MainWindow 類別中加入下列 ManipulationInertiaStarting 事件處理常式。

ManipulationInertiaStarting 事件會在使用者從螢幕提起所有手指時發生。程式碼會設定矩形移動、擴充和旋轉的初始速度和減速。

Private Sub Window_InertiaStarting(ByVal sender As Object,
                                   ByVal e As ManipulationInertiaStartingEventArgs)

    ' Decrease the velocity of the Rectangle's movement by 
    ' 10 inches per second every second.
    ' (10 inches * 96 pixels per inch / 1000ms^2)
    e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0)

    ' Decrease the velocity of the Rectangle's resizing by 
    ' 0.1 inches per second every second.
    ' (0.1 inches * 96 pixels per inch / (1000ms^2)
    e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0)

    ' Decrease the velocity of the Rectangle's rotation rate by 
    ' 2 rotations per second every second.
    ' (2 * 360 degrees / (1000ms^2)
    e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0)

    e.Handled = True
End Sub

void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e)
{

    // Decrease the velocity of the Rectangle's movement by 
    // 10 inches per second every second.
    // (10 inches * 96 pixels per inch / 1000ms^2)
    e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0);

    // Decrease the velocity of the Rectangle's resizing by 
    // 0.1 inches per second every second.
    // (0.1 inches * 96 pixels per inch / (1000ms^2)
    e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0);

    // Decrease the velocity of the Rectangle's rotation rate by 
    // 2 rotations per second every second.
    // (2 * 360 degrees / (1000ms^2)
    e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0);

    e.Handled = true;
}

建置及執行專案。

您應該會看到紅色正方形出現在視窗中。

測試應用程式

若要測試應用程式，請嘗試下列操作。請注意，您可以同時執行下列多項操作。

若要移動 Rectangle，請將手指放在 Rectangle 上並且移動手指橫跨螢幕。
若要調整 Rectangle 的大小，請將兩隻手指放在 Rectangle 上，並且將兩隻手指彼此移近或移開。
若要旋轉 Rectangle，請將兩隻手指放在 Rectangle 上，並且讓兩隻手指繞彼此周圍旋轉。

若要製造慣性效果，請在您執行上述操作時，快速地將手指從螢幕提起。 Rectangle 將繼續移動、調整大小或旋轉幾秒鐘才停止。

請參閱

參考

UIElement.ManipulationStarting

UIElement.ManipulationDelta

UIElement.ManipulationInertiaStarting

逐步解說：建立您的第一個觸控應用程式

必要條件

建立應用程式

若要建立應用程式

測試應用程式

請參閱

參考

其他資源