Walkthrough: creating your first touch Application

WPF 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:

• Microsoft Visual Studio 2010.

• Windows 7.

• A device that accepts touch input, such as a touchscreen, that supports windows touch.

Additionally, you shoshould have a basic understanding of how to create an application in WPF, especially how to subscribe to and handle an event. For more information, see Walkthrough:
Getting started with WPF.

Creating
The Application

To create the application

1. Create a new WPF Application project in Visual Basic or Visual C # named basicmanipulation. For more information, see How
   To: create a new WPF application project.

2. Replace the contents of mainwindow. XAML with the following XAML.

   This markup creates a simple application that contains a red rectangle on
   A canvas. The ismanipulationenabled Property
   Of the rectangle is set to true so that it will receive Manipulation events.
   The application subscribes to the manipulationstarting, manipulationdelta,
   And manipulationinertiastarting events. These events
   Contain the logic to move the rectangle when the user manipulates it.

   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. If you are using Visual Basic, in the first line of mainwindow. XAML, replace X: class = "basicmanipulation. mainwindow" with X: class = "mainwindow ".

4. In the mainwindow class, add the following manipulationstarting event
   Handler.

   The manipulationstarting event occurs
   When WPF detects that touch input begins to manipulate an object. The Code specifies that the position of the manipulation shocould be relative to the window
   Setting the manipulationcontainer property.

   C # VB

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

5. In the mainwindow class, add the following manipulationdelta event
   Handler.

   The manipulationdelta event occurs when
   Touch input changes position and can occur multiple times during a manipulation. The event can also occur after a finger is raised. For example, if the user drags a finger should ss a screen, the manipulationdelta event
   Occurs multiple times as the finger moves. When the user raises a finger from the screen, the manipulationdelta event
   Keeps occurring to simulate inertia.

   The Code applies the deltamanipulation
   The rendertransform of the rectangle
   Move it as the user moves the touch input. It also checks whether the rectangle is
   Outside the bounds of the window when the event occurs during inertia. If so, the application
   CILS themanipulationdeltaeventargs. Complete Method
   To end the manipulation.

   C # VB

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

6. In the mainwindow class, add the following manipulationinertiastarting event
   Handler.

   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.

   C # VB

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

7. Build and run the project.

   You shoshould 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.

• To move the rectangle, put a finger on the rectangle and
  Move the finger into ss the screen.

• To resize the rectangle, put two fingers on the rectangle and
  Move the fingers closer together or farther apart from each other.

• 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. The rectangle will
Continue to move, resize, or rotate for a few seconds before it stops.

See
Also

Referenceuielement. manipulationstartinguielement. manipulationdeltauielement. manipulationinertiastarting