逐步解說:建立您的第一個觸控應用程式
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 將繼續移動、調整大小或旋轉幾秒鐘才停止。