Tutorial: Crear la primera aplicación táctilWalkthrough: Creating Your First Touch Application

WPFWPF permite que las aplicaciones responder a la entrada táctil.enables applications to respond to touch. Por ejemplo, puede interactuar con una aplicación mediante el uso de uno o más dedos en un dispositivo táctil, como una pantalla táctil en este tutorial se crea una aplicación que permite al usuario mover, cambiar el tamaño o girar un solo objeto mediante el uso de interacción.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.

Requisitos previosPrerequisites

Necesita los componentes siguientes para completar este tutorial:You need the following components to complete this walkthrough:

  • Visual Studio.Visual Studio.

  • Un dispositivo que acepta la entrada táctil, como una pantalla táctil, compatible con Windows Touch.A device that accepts touch input, such as a touchscreen, that supports Windows Touch.

Además, debe tener un conocimiento básico de cómo crear una aplicación en WPFWPF, especialmente cómo suscribirse a y controlar un evento.Additionally, you should have a basic understanding of how to create an application in WPFWPF, especially how to subscribe to and handle an event. Para obtener más información, vea Tutorial: Mi primera aplicación de escritorio de WPF.For more information, see Walkthrough: My first WPF desktop application.

Crear la aplicaciónCreating the Application

Para crear la aplicaciónTo create the application

  1. Cree un proyecto de aplicación de WPF en Visual Basic o Visual C# denominado BasicManipulation.Create a new WPF Application project in Visual Basic or Visual C# named BasicManipulation. Para obtener más información, vea Tutorial: Mi primera aplicación de escritorio de WPF.For more information, see Walkthrough: My first WPF desktop application.

  2. Reemplace el contenido de MainWindow.xaml por el XAML siguiente.Replace the contents of MainWindow.xaml with the following XAML.

    Este marcado crea una aplicación simple que contiene una roja Rectangle en un Canvas.This markup creates a simple application that contains a red Rectangle on a Canvas. El IsManipulationEnabled propiedad de la Rectangle se establece en true para que se va a recibir eventos de manipulación.The IsManipulationEnabled property of the Rectangle is set to true so that it will receive manipulation events. La aplicación se suscribe a la ManipulationStarting, ManipulationDelta, y ManipulationInertiaStarting eventos.The application subscribes to the ManipulationStarting, ManipulationDelta, and ManipulationInertiaStarting events. Estos eventos contienen la lógica para mover el Rectangle cuando el usuario manipula.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. Si utiliza Visual Basic, en la primera línea de MainWindow.xaml, reemplace x:Class="BasicManipulation.MainWindow" con 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. En el MainWindow clase, agregue las siguientes ManipulationStarting controlador de eventos.In the MainWindow class, add the following ManipulationStarting event handler.

    El ManipulationStarting evento tiene lugar cuando WPFWPF detecta ese toque entrada comienza a manipular un objeto.The ManipulationStarting event occurs when WPFWPF detects that touch input begins to manipulate an object. El código especifica que la posición de la manipulación debe ser relativa a la Window estableciendo el ManipulationContainer propiedad.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. En el MainWindow clase, agregue las siguientes ManipulationDelta controlador de eventos.In the MainWindow class, add the following ManipulationDelta event handler.

    El ManipulationDelta evento se produce cuando cambia la posición de entrada de la entrada táctil y puede aparecer varias veces durante una manipulación.The ManipulationDelta event occurs when the touch input changes position and can occur multiple times during a manipulation. También puede producirse el evento después de que se genera un dedo.The event can also occur after a finger is raised. Por ejemplo, si el usuario arrastra un dedo en una pantalla, el ManipulationDelta evento tiene lugar varias veces como se mueve el dedo.For example, if the user drags a finger across a screen, the ManipulationDelta event occurs multiple times as the finger moves. Cuando el usuario levanta un dedo en la pantalla, el ManipulationDelta evento sigue produciéndose para simular la inercia.When the user raises a finger from the screen, the ManipulationDelta event keeps occurring to simulate inertia.

    El código se aplica el DeltaManipulation a la RenderTransform de la Rectangle moverlo a medida que el usuario mueve la entrada táctil de entrada.The code applies the DeltaManipulation to the RenderTransform of the Rectangle to move it as the user moves the touch input. También comprueba si el Rectangle está fuera de los límites del Window cuando el evento tiene lugar durante la inercia.It also checks whether the Rectangle is outside the bounds of the Window when the event occurs during inertia. Si es así, la aplicación llama a la ManipulationDeltaEventArgs.Complete método para finalizar la manipulación.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. En el MainWindow clase, agregue las siguientes ManipulationInertiaStarting controlador de eventos.In the MainWindow class, add the following ManipulationInertiaStarting event handler.

    El ManipulationInertiaStarting evento se produce cuando el usuario todos los dedos de la pantalla.The ManipulationInertiaStarting event occurs when the user raises all fingers from the screen. El código establece la velocidad inicial y la desaceleración para el movimiento, expansión y rotación del rectángulo.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. Compile y ejecute el proyecto.Build and run the project.

    Debería ver un cuadrado rojo en la ventana.You should see a red square appear in the window.

Probar la aplicaciónTesting the Application

Para probar la aplicación, intente las siguientes manipulaciones.To test the application, try the following manipulations. Tenga en cuenta que puede realizar más de una de las siguientes acciones al mismo tiempo.Note that you can do more than one of the following at the same time.

  • Para mover el Rectangle, coloque un dedo en el Rectangle y mueva el dedo por la pantalla.To move the Rectangle, put a finger on the Rectangle and move the finger across the screen.

  • Para cambiar el tamaño de la Rectangle, coloque dos dedos en la Rectangle y acérquelos o aléjelos aparte entre sí.To resize the Rectangle, put two fingers on the Rectangle and move the fingers closer together or farther apart from each other.

  • Para girar el Rectangle, coloque dos dedos en la Rectangle y gírelos entre sí.To rotate the Rectangle, put two fingers on the Rectangle and rotate the fingers around each other.

Para producir inercia, generar rápidamente los dedos en la pantalla de medida que realiza las manipulaciones anteriores.To cause inertia, quickly raise your fingers from the screen as you perform the previous manipulations. El Rectangle seguirá mover, cambiar el tamaño o gire durante algunos segundos antes de detenerse.The Rectangle will continue to move, resize, or rotate for a few seconds before it stops.

Vea tambiénSee also