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

发布时间:2024年01月07日

本文内容

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

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

一、先决条件

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

  • Visual Studio。

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

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

二、创建应用程序

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

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

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

    XAML复制

    <Window x:Class="BasicManipulation.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://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. 在?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?将继续移动、重设大小或旋转几秒钟,然后才停止。

文章来源:https://blog.csdn.net/m0_51887793/article/details/135435457
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。