--- title: "Walkthrough: Creating Your First Touch Application" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "creating a touch-sensitive application [WPF]" - "touchscreen applications [WPF], creating" - "touch-sensitive applications [WPF], creating" - "creating a touchscreen application [WPF]" ms.assetid: d69e602e-9a25-4e24-950b-e89eaa2a906b --- # Walkthrough: Creating Your First Touch Application [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] 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. - A device that accepts touch input, such as a touchscreen, that supports Windows Touch. Additionally, you should have a basic understanding of how to create an application in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], especially how to subscribe to and handle an event. For more information, see [Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md). ## 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 [Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md). 2. Replace the contents of MainWindow.xaml with the following XAML. This markup creates a simple application that contains a red on a . The property of the is set to true so that it will receive manipulation events. The application subscribes to the , , and events. These events contain the logic to move the when the user manipulates it. [!code-xaml[BasicManipulation#UI](~/samples/snippets/csharp/VS_Snippets_Wpf/basicmanipulation/csharp/mainwindow.xaml#ui)] 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 event handler. The event occurs when [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] detects that touch input begins to manipulate an object. The code specifies that the position of the manipulation should be relative to the by setting the property. [!code-csharp[BasicManipulation#ManipulationStarting](~/samples/snippets/csharp/VS_Snippets_Wpf/basicmanipulation/csharp/mainwindow.xaml.cs#manipulationstarting)] [!code-vb[BasicManipulation#ManipulationStarting](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicmanipulation/visualbasic/mainwindow.xaml.vb#manipulationstarting)] 5. In the `MainWindow` class, add the following event handler. The 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. For example, if the user drags a finger across a screen, the event occurs multiple times as the finger moves. When the user raises a finger from the screen, the event keeps occurring to simulate inertia. The code applies the to the of the to move it as the user moves the touch input. It also checks whether the is outside the bounds of the when the event occurs during inertia. If so, the application calls the method to end the manipulation. [!code-csharp[BasicManipulation#ManipulationDelta](~/samples/snippets/csharp/VS_Snippets_Wpf/basicmanipulation/csharp/mainwindow.xaml.cs#manipulationdelta)] [!code-vb[BasicManipulation#ManipulationDelta](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicmanipulation/visualbasic/mainwindow.xaml.vb#manipulationdelta)] 6. In the `MainWindow` class, add the following event handler. The 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. [!code-csharp[BasicManipulation#ManipulationInertiaStarting](~/samples/snippets/csharp/VS_Snippets_Wpf/basicmanipulation/csharp/mainwindow.xaml.cs#manipulationinertiastarting)] [!code-vb[BasicManipulation#ManipulationInertiaStarting](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicmanipulation/visualbasic/mainwindow.xaml.vb#manipulationinertiastarting)] 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. - To move the , put a finger on the and move the finger across the screen. - To resize the , put two fingers on the and move the fingers closer together or farther apart from each other. - To rotate the , put two fingers on the and rotate the fingers around each other. To cause inertia, quickly raise your fingers from the screen as you perform the previous manipulations. The will continue to move, resize, or rotate for a few seconds before it stops. ## See also - - -