Permalink
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (62 sloc) 7.41 KB
title ms.custom ms.date ms.prod ms.reviewer ms.suite ms.technology ms.tgt_pltfrm ms.topic helpviewer_keywords ms.assetid caps.latest.revision author ms.author manager
Walkthrough: Creating Your First Touch Application
03/30/2017
.net-framework
dotnet-wpf
article
creating a touch-sensitive application [WPF]
touchscreen applications [WPF], creating
touch-sensitive applications [WPF], creating
creating a touchscreen application [WPF]
d69e602e-9a25-4e24-950b-e89eaa2a906b
9
dotnet-bot
dotnetcontent
wpickett

Walkthrough: Creating Your First Touch Application

[!INCLUDETLA2#tla_winclient] 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:

  • [!INCLUDEvs_dev10_ext].

  • Windows 7.

  • 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 [!INCLUDETLA2#tla_winclient], especially how to subscribe to and handle an event. For more information, see Walkthrough: My first WPF desktop application.

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 xref:System.Windows.Shapes.Rectangle on a xref:System.Windows.Controls.Canvas. The xref:System.Windows.UIElement.IsManipulationEnabled%2A property of the xref:System.Windows.Shapes.Rectangle is set to true so that it will receive manipulation events. The application subscribes to the xref:System.Windows.UIElement.ManipulationStarting, xref:System.Windows.UIElement.ManipulationDelta, and xref:System.Windows.UIElement.ManipulationInertiaStarting events. These events contain the logic to move the xref:System.Windows.Shapes.Rectangle when the user manipulates it.

    [!code-xamlBasicManipulation#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 xref:System.Windows.UIElement.ManipulationStarting event handler.

    The xref:System.Windows.UIElement.ManipulationStarting event occurs when [!INCLUDETLA2#tla_winclient] detects that touch input begins to manipulate an object. The code specifies that the position of the manipulation should be relative to the xref:System.Windows.Window by setting the xref:System.Windows.Input.ManipulationStartingEventArgs.ManipulationContainer%2A property.

    [!code-csharpBasicManipulation#ManipulationStarting] [!code-vbBasicManipulation#ManipulationStarting]

  5. In the MainWindow class, add the following xref:System.Windows.Input.ManipulationDelta event handler.

    The xref:System.Windows.Input.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. For example, if the user drags a finger across a screen, the xref:System.Windows.Input.ManipulationDelta event occurs multiple times as the finger moves. When the user raises a finger from the screen, the xref:System.Windows.Input.ManipulationDelta event keeps occurring to simulate inertia.

    The code applies the xref:System.Windows.Input.ManipulationDeltaEventArgs.DeltaManipulation%2A to the xref:System.Windows.UIElement.RenderTransform%2A of the xref:System.Windows.Shapes.Rectangle to move it as the user moves the touch input. It also checks whether the xref:System.Windows.Shapes.Rectangle is outside the bounds of the xref:System.Windows.Window when the event occurs during inertia. If so, the application calls the xref:System.Windows.Input.ManipulationDeltaEventArgs.Complete%2A?displayProperty=nameWithType method to end the manipulation.

    [!code-csharpBasicManipulation#ManipulationDelta] [!code-vbBasicManipulation#ManipulationDelta]

  6. In the MainWindow class, add the following xref:System.Windows.UIElement.ManipulationInertiaStarting event handler.

    The xref:System.Windows.UIElement.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.

    [!code-csharpBasicManipulation#ManipulationInertiaStarting] [!code-vbBasicManipulation#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 xref:System.Windows.Shapes.Rectangle, put a finger on the xref:System.Windows.Shapes.Rectangle and move the finger across the screen.

  • To resize the xref:System.Windows.Shapes.Rectangle, put two fingers on the xref:System.Windows.Shapes.Rectangle and move the fingers closer together or farther apart from each other.

  • To rotate the xref:System.Windows.Shapes.Rectangle, put two fingers on the xref:System.Windows.Shapes.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 xref:System.Windows.Shapes.Rectangle will continue to move, resize, or rotate for a few seconds before it stops.

See Also

xref:System.Windows.UIElement.ManipulationStarting?displayProperty=nameWithType
xref:System.Windows.UIElement.ManipulationDelta?displayProperty=nameWithType
xref:System.Windows.UIElement.ManipulationInertiaStarting?displayProperty=nameWithType