Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

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

Note Note:

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

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

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.

Show:
© 2014 Microsoft