How to: Handle Manipulation Events

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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.

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

The following manipulation events are supported:

• ManipulationCompleted

• ManipulationStarted

• ManipulationDelta

The following gesture events are supported in Silverlight for Windows Phone:

• Tap

• DoubleTap

• Hold

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

Procedures

To create an application

1. Create a new Windows Phone project in Visual C# or Visual Basic.

2. 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.

   <Canvas>
       <Rectangle 
           Name="rectangle"
           Width="200" Height="200"
           Fill="Blue" Stroke="Blue" StrokeThickness="1" />
   </Canvas>
   

3. In the PhoneApplicationPage class, add the following variables.

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

4. In the PhoneApplicationPage class, add the following stub for the ManipulationDelta event handler.

   void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
   {
   }
   

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

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

6. Add the following code to the class constructor.

          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;
   

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

   void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
           {
               // Scale the rectangle.
               this.scale.ScaleX *= e.DeltaManipulation.Scale.X;
               this.scale.ScaleY *= e.DeltaManipulation.Scale.Y;
   
               // Move the rectangle.
               this.translation.X += e.DeltaManipulation.Translation.X;
               this.translation.Y += e.DeltaManipulation.Translation.Y;
           }
   

8. Build and run the project.

   You should see a blue square appear in the window.

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.

See Also

Other Resources

Silverlight for Windows Phone