Пошаговое руководство. Создание первого приложения для обработки касанийWalkthrough: Creating Your First Touch Application

WPFWPF позволяет приложениям реагировать на касание.enables applications to respond to touch. Например может взаимодействовать с приложением с помощью одного или более пальцами сенсорные устройства, например сенсорный экран, в этом пошаговом руководстве создается приложение, которое позволяет пользователю перемещать, изменять размер или поворот объекта с использованием сенсорного ввода.For example, you can interact with an application by using one or more fingers on a touch-sensitive device, such as a touchscreen This walkthrough creates an application that enables the user to move, resize, or rotate a single object by using touch.

Предварительные требованияPrerequisites

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.You need the following components to complete this walkthrough:

  • Visual Studio.Visual Studio.

  • Устройство, которое принимает сенсорного ввода, например сенсорный экран, который поддерживает Windows Touch.A device that accepts touch input, such as a touchscreen, that supports Windows Touch.

Кроме того, должен иметь базовое представление о том, как создать приложение в WPFWPF, особенно как подписаться на и как обрабатывать событие.Additionally, you should have a basic understanding of how to create an application in WPFWPF, especially how to subscribe to and handle an event. Дополнительные сведения см. в разделе Пошаговое руководство: Создание первого классического приложения WPF.For more information, see Walkthrough: My first WPF desktop application.

Создание приложенияCreating the Application

Создание приложенияTo create the application

  1. Создайте проект приложения WPF на Visual Basic или Visual C# с именем BasicManipulation.Create a new WPF Application project in Visual Basic or Visual C# named BasicManipulation. Дополнительные сведения см. в разделе Пошаговое руководство: Создание первого классического приложения WPF.For more information, see Walkthrough: My first WPF desktop application.

  2. Замените содержимое файла MainWindow.XAML на следующий XAML.Replace the contents of MainWindow.xaml with the following XAML.

    Эта разметка создает простое приложение, содержащей красный Rectangle на Canvas.This markup creates a simple application that contains a red Rectangle on a Canvas. IsManipulationEnabled Свойство Rectangle имеет значение true, чтобы он будет получать события манипуляции.The IsManipulationEnabled property of the Rectangle is set to true so that it will receive manipulation events. Приложение подписывается на ManipulationStarting, ManipulationDelta, и ManipulationInertiaStarting события.The application subscribes to the ManipulationStarting, ManipulationDelta, and ManipulationInertiaStarting events. Эти события содержат логику перемещения Rectangle когда пользователь выполняет операции с ним.These events contain the logic to move the Rectangle when the user manipulates it.

    <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. Если вы используете Visual Basic, в первой строке файла MainWindow.XAML, замените x:Class="BasicManipulation.MainWindow" с x:Class="MainWindow".If you are using Visual Basic, in the first line of MainWindow.xaml, replace x:Class="BasicManipulation.MainWindow" with x:Class="MainWindow".

  4. В MainWindow класса, добавьте следующий ManipulationStarting обработчик событий.In the MainWindow class, add the following ManipulationStarting event handler.

    ManipulationStarting Событие возникает при WPFWPF обнаруживает, что сенсорный ввод начал доступ к объекту.The ManipulationStarting event occurs when WPFWPF detects that touch input begins to manipulate an object. Код указывает, что позиция манипуляции относительно Window , задав ManipulationContainer свойство.The code specifies that the position of the manipulation should be relative to the Window by setting the ManipulationContainer property.

    void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
    {
        e.ManipulationContainer = this;
        e.Handled = true;
    }
    
    Private Sub Window_ManipulationStarting(ByVal sender As Object, ByVal e As ManipulationStartingEventArgs)
        e.ManipulationContainer = Me
        e.Handled = True
    End Sub
    
  5. В MainWindow класса, добавьте следующий ManipulationDelta обработчик событий.In the MainWindow class, add the following ManipulationDelta event handler.

    ManipulationDelta Событие возникает, когда сенсорный ввод изменяет положение и может встречаться несколько раз во время манипуляции.The ManipulationDelta event occurs when the touch input changes position and can occur multiple times during a manipulation. Это событие также может возникать после возникновения палец.The event can also occur after a finger is raised. Например, если пользователь перемещает палец по экрану ManipulationDelta событие возникает несколько раз как перемещения пальца.For example, if the user drags a finger across a screen, the ManipulationDelta event occurs multiple times as the finger moves. Когда пользователь отрывает палец с экрана, ManipulationDelta событие продолжает возникать для имитации инерции.When the user raises a finger from the screen, the ManipulationDelta event keeps occurring to simulate inertia.

    Код применяет DeltaManipulation для RenderTransform из Rectangle Чтобы переместить его, как пользователь перемещает сенсорный ввод.The code applies the DeltaManipulation to the RenderTransform of the Rectangle to move it as the user moves the touch input. Он также проверяет ли Rectangle выходит за границы Window при возникновении события во время инерции.It also checks whether the Rectangle is outside the bounds of the Window when the event occurs during inertia. Если таким образом, приложение вызывает ManipulationDeltaEventArgs.Complete для завершения манипуляции.If so, the application calls the ManipulationDeltaEventArgs.Complete method to end the manipulation.

    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;
    }
    
    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 обработчик событий.In the MainWindow class, add the following ManipulationInertiaStarting event handler.

    ManipulationInertiaStarting Событие происходит, когда пользователь вызывает все пальцы на экране.The ManipulationInertiaStarting event occurs when the user raises all fingers from the screen. Код задает начальную скорость и замедление для перемещения, расширения и поворота прямоугольника.The code sets the initial velocity and deceleration for the movement, expansion, and rotation of the rectangle.

    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;
    }
    
    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. Постройте и запустите проект.Build and run the project.

    Вы увидите красный квадрат в окне.You should see a red square appear in the window.

Тестирование приложенияTesting the Application

Чтобы протестировать приложение, попробуйте следующие манипуляции.To test the application, try the following manipulations. Обратите внимание на то, что можно сделать более одного из указанных ниже, в то же время.Note that you can do more than one of the following at the same time.

  • Чтобы переместить Rectangle, поместите палец на Rectangle и переместите палец по экрану.To move the Rectangle, put a finger on the Rectangle and move the finger across the screen.

  • Чтобы изменить размер Rectangle, поместите два пальца на Rectangle и Сведите Сведите или разведите их друг с другом.To resize the Rectangle, put two fingers on the Rectangle and move the fingers closer together or farther apart from each other.

  • Для поворота Rectangle, поместите два пальца на Rectangle и Поворачивайте их вокруг друг с другом.To rotate the Rectangle, put two fingers on the Rectangle and rotate the fingers around each other.

Чтобы вызвать инерцию, быстро повысить пальца на экране при выполнении предыдущих манипуляций.To cause inertia, quickly raise your fingers from the screen as you perform the previous manipulations. Rectangle Будет продолжать перемещения, размер или поворачивать на несколько секунд, прежде чем остановится.The Rectangle will continue to move, resize, or rotate for a few seconds before it stops.

См. такжеSee also