How to: Handle Manipulation Events

Silverlight

Silverlight for Windows Phone allows you to process touch input by using manipulation events. By using these events, you can move and scale objects in response to touch and multitouch input. Manipulation events are supported on objects derived from UIElement.

Note:
Rotate transforms are not supported on Windows Phone 7 Series.

Manipulation events are supported by default on Windows Phone, so the IsManipulationEnabled property is not supported.

The following manipulation events are supported:

Note:
Inertia events are not supported in this release of Silverlight for Windows Phone.

Procedures

To create an application

Create a new Windows Phone project in Visual C# or Visual Basic.
Add the following XAML to MainPage.xaml.
This markup creates a simple application that contains a blue rectangle on a Canvas. The application subscribes to the ManipulationDelta event. These events contain the logic to move the Rectangle when the user manipulates it.
Copy
<Canvas> <Rectangle Name="rectangle" Width="200" Height="200" Fill="Blue" Stroke="Blue" StrokeThickness="1" /> </Canvas>

In the PhoneApplicationPage class, add the following variables.

Copy

   private TransformGroup transformGroup;
   private TranslateTransform translation;
   private ScaleTransform scale;

In the PhoneApplicationPage class, add the following stub for the ManipulationDelta event handler.
Copy
void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { }

In the PhoneApplicationPage class constructor, add event listeners for ManipulationDelta.

Copy

   public MainPage()
   {
       InitializeComponent();
       this.ManipulationDelta += 
           this.PhoneApplicationPage_ManipulationDelta;
   }

Add the following code to the class constructor.

Copy

       this.transformGroup = new TransformGroup();
       this.translation = new TranslateTransform();
       this.scale = new ScaleTransform();

       this.transformGroup.Children.Add(this.scale);
       this.transformGroup.Children.Add(this.translation);
       this.rectangle.RenderTransform = this.transformGroup;

In the PhoneApplicationPage class, add the following code to the ManipulationDelta event handler.
The ManipulationDelta event occurs when the touch input changes position and can occur multiple times during a manipulation. The event can also occur after the user's finger is raised. For example, if the user drags a finger across a screen, the ManipulationDelta event occurs multiple times as the finger moves.
The code applies the DeltaManipulation to the RenderTransform of the Rectangle to move it as the user moves the touch input.
Note:
The Windows Phone Emulator does not support multitouch input through the mouse, so you must test scale transforms on a development computer that supports touch input, or test on an actual device.
Copy
void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { // Scale the rectangle. if (e.DeltaManipulation.Scale.X != 0) { this.scale.ScaleX *= e.DeltaManipulation.Scale.X; } if (e.DeltaManipulation.Scale.Y != 0) { this.scale.ScaleY *= e.DeltaManipulation.Scale.Y; } // Move the rectangle. this.translation.X += e.DeltaManipulation.Translation.X; this.translation.Y += e.DeltaManipulation.Translation.Y; }
Build and run the project.
You should see a blue square appear in the window.

Note:
The Windows Phone Emulator does not support multitouch input through the mouse, so you must test scale transforms on a development computer that supports touch input, or test on an actual device.

Testing the Application

To test the application, try the following manipulations. Notice that you can do more than one of the following at the same time.

To move the Rectangle, put your finger on the Rectangle and move the finger across the screen.
To resize the Rectangle, put two fingers on the Rectangle and move the fingers closer together or farther apart from each other.

Other Resources

Silverlight for Windows Phone