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

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

必要條件

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

  • Microsoft Visual Studio 2010。

  • Windows 7。

  • 接受支援 Windows Touch 之觸控輸入的裝置,例如觸控螢幕。

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

建立應用程式

若要建立應用程式

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

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

    這個標記會建立簡單的應用程式,其中 Canvas 上包含紅色的 RectangleRectangleIsManipulationEnabled 屬性設定為 true,因此將會接收操作事件。 應用程式會訂閱 ManipulationStartingManipulationDeltaManipulationInertiaStarting 事件。 這些事件包含在使用者操作 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>
    
    
  3. 如果您是使用 Visual Basic,則請將 MainWindow.xaml 的第一行中的 x:Class="BasicManipulation.MainWindow" 取代為 x:Class="MainWindow"。

  4. 在 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
    
  5. 在 MainWindow 類別中加入下列 ManipulationDelta 事件處理常式。

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

    程式碼會將 DeltaManipulation 套用至 RectangleRenderTransform,以便隨著使用者移動觸控輸入而移動。 程式碼還會在慣性期間事件發生時,檢查 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
    
  6. 在 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
    
  7. 建置及執行專案。

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

測試應用程式

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

  • 若要移動 Rectangle,請將手指放在 Rectangle 上並且移動手指橫跨螢幕。

  • 若要調整 Rectangle 的大小,請將兩隻手指放在 Rectangle 上,並且將兩隻手指彼此移近或移開。

  • 若要旋轉 Rectangle,請將兩隻手指放在 Rectangle 上,並且讓兩隻手指繞彼此周圍旋轉。

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

請參閱

參考

UIElement.ManipulationStarting

UIElement.ManipulationDelta

UIElement.ManipulationInertiaStarting