【WPF.NET】演练：创建触控应用程序

本文内容

1. 先决条件
2. 创建应用程序
3. 测试应用程序

WPF 使应用程序能够响应触控。 例如，可以通过在触控敏感型设备（如触摸屏）上使用一根或多根手指与应用程序交互。本演练创建了一个应用程序，使用户能够使用触控来移动、旋转单个对象或重设其大小。

一、先决条件

你需要满足以下条件才能完成本演练：

• Visual Studio。

• 一种接受触控输入的设备，例如支持 Windows Touch 的触摸屏。

此外，应对如何在 WPF 中创建应用程序，尤其是如何订阅和处理事件有一个基本的了解。 

二、创建应用程序

1. 使用 Visual C# 创建名为 BasicManipulation 的新 WPF 应用程序项目。 

2. 将 MainWindow.xaml 的内容替换为以下 XAML。

   此标记创建一个简单的应用程序，该应用程序在 Canvas 上包含一个红色 Rectangle。 Rectangle 的 IsManipulationEnabled 属性设置为 true，以便接收操作事件。 应用程序订阅 ManipulationStarting、ManipulationDelta 和 ManipulationInertiaStarting 事件。 这些事件包含用于在用户操作 Rectangle 时移动它的逻辑。

   XAML复制

3. 在 MainWindow 类中，添加以下 ManipulationStarting 事件处理程序。

   当 WPF 检测到触控输入开始操作对象时，将发生 ManipulationStarting 事件。 代码通过设置 ManipulationContainer 属性来指定操作的位置应相对于 Window。

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

4. 在 MainWindow 类中，添加以下 ManipulationDelta 事件处理程序。

   当触控输入改变位置时，会发生 ManipulationDelta 事件，该事件可在操作期间多次发生。 该事件也可以在手指抬起后发生。 例如，如果用户在屏幕上拖动手指，则 ManipulationDelta 事件会在手指移动时发生多次。 当用户从屏幕上抬起手指时，ManipulationDelta 事件会不断发生以模拟惯性。

   该代码将 DeltaManipulation 应用于 Rectangle 的 RenderTransform 以在用户移动触控输入时移动它。 它还会检查当事件在惯性期间发生时，Rectangle 是否超出了 Window 的边界。 如果是，应用程序会调用 ManipulationDeltaEventArgs.Complete 方法来结束操作。

   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;
   }
   

5. 在 MainWindow 类中，添加以下 ManipulationInertiaStarting 事件处理程序。

   当用户从屏幕上抬起所有手指时，会发生 ManipulationInertiaStarting 事件。 代码设置矩形移动、扩展和旋转的初始速度和减速度。

   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;
   }
   

6. 生成并运行该项目。

   应会在窗口中看到一个红色方块。

三、测试应用程序

若要测试应用程序，请尝试以下操作。 请注意，可以同时执行以下多项操作。

• 若要移动 Rectangle，请将手指放在 Rectangle 上，然后在屏幕上移动手指。

• 若要重设 Rectangle 的大小，请将两根手指放在 Rectangle 上，然后将手指相互靠拢或分开。

• 若要旋转 Rectangle，请将两根手指放在 Rectangle 上并同向转动手指。

若要引起惯性，请在执行之前的操作时将手指从屏幕上快速抬起。 Rectangle 将继续移动、重设大小或旋转几秒钟，然后才停止。