#743 – Using Touch Manipulation Events to Scale an Element

In the previous post, we used a ManipulationDelta object in the ManipulationDelta event handler to both translate and rotate a user interface element.  The user’s touch gestures for translation (sliding finger) and rotation (rotating two fingers) were automatically captured and available in the Translation and Rotation properties of the ManipulationDelta object.

We can also support scaling of an element using the ManipulationDelta event.  The ManipulationDelta object also contains a Scale property, which stores a Vector that indicates the target scale for the object (e.g. scale of 0.5 indicates 1/2 size).  This property is automatically set when a user uses two fingers on an element in a pinch or spread gesture, indicating that they want to zoom in or out of the element.

The sample code below supports all translation, rotation and scaling of an Image element.

    <Canvas Name="canvMain" Background="Transparent">
        <Image Source="JamesII.jpg" Width="100"
               IsManipulationEnabled="True"
               RenderTransform="{Binding ImageTransform}"
               ManipulationStarting="Image_ManipulationStarting" ManipulationDelta="Image_ManipulationDelta"/>
    </Canvas>

Below is the code-behind for this sample.  Note that we now apply translation, rotation and scaling to the underlying matrix.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            ImageTransform = new MatrixTransform();
        }

        private MatrixTransform imageTransform;
        public MatrixTransform ImageTransform
        {
            get { return imageTransform; }
            set
            {
                if (value != imageTransform)
                {
                    imageTransform = value;
                    RaisePropertyChanged("ImageTransform");
                }
            }
        }

        private void Image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
        {
            // Ask for manipulations to be reported relative to the canvas
            e.ManipulationContainer = canvMain;
        }

        private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            ManipulationDelta md = e.DeltaManipulation;
            Vector trans = md.Translation;
            double rotate = md.Rotation;
            Vector scale = md.Scale;

            Matrix m = imageTransform.Matrix;

            // Find center of element and then transform to get current location of center
            FrameworkElement fe = e.Source as FrameworkElement;
            Point center = new Point(fe.ActualWidth / 2, fe.ActualHeight / 2);
            center = m.Transform(center);

            // Update matrix to reflect translation/rotation
            m.Translate(trans.X, trans.Y);
            m.RotateAt(rotate, center.X, center.Y);
            m.ScaleAt(scale.X, scale.Y, center.X, center.Y);

            imageTransform.Matrix = m;
            RaisePropertyChanged("ImageTransform");

            e.Handled = true;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }

#741 – Using Touch Manipulation Events to Translate an Element

You can use the touch manipulation events to translate an element, that is, to move it around on the screen.

To start with, you set the IsManipulationEnabled property of the element to true.  This allows the manipulation events to be fired.  You also handle both the ManipulationStarting and ManipulationDelta events.

    <Canvas Name="canvMain" Background="Transparent">
        <Image Source="JamesII.jpg" Width="100"
               IsManipulationEnabled="True"
               RenderTransform="{Binding ImageTransform}"
               ManipulationStarting="Image_ManipulationStarting" ManipulationDelta="Image_ManipulationDelta"/>
    </Canvas>

Below is the code that allows the image to be moved around (translated) as the user moves their finger.  We bind the image’s render transform to a MatrixTransform object, which contains a matrix that allows us to scale, rotate or translate the image.  In our case, we modify the translation part of the matrix with the translation vector returned in the ManipulationDelta event.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            ImageTransform = new MatrixTransform();
        }

        private MatrixTransform imageTransform;
        public MatrixTransform ImageTransform
        {
            get { return imageTransform; }
            set
            {
                if (value != imageTransform)
                {
                    imageTransform = value;
                    RaisePropertyChanged("ImageTransform");
                }
            }
        }

        private void Image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
        {
            // Ask for manipulations to be reported relative to the canvas
            e.ManipulationContainer = canvMain;
        }

        private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            ManipulationDelta md = e.DeltaManipulation;
            Vector trans = md.Translation;

            // Update matrix to reflect translation
            Matrix m = imageTransform.Matrix;
            m.Translate(trans.X, trans.Y);
            imageTransform.Matrix = m;
            RaisePropertyChanged("ImageTransform");

            e.Handled = true;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }

741-001

#739 – Handling Touch Input at Different Levels

In WPF, there are three different ways that your application can support touch input:

  • Built-in support for touch.  Some elements will automatically respond to touch input.  For example, you can trigger the Click event for a button by touching the button or scroll a ListBox by touching and dragging.
  • Manipulation Events.  User interface elements support a series of manipulation events that let you detect when the user is trying to rotate, scale (zoom) or translate (move) an element.  The touch points from two fingers are automatically mapped to an event with the correct data.  For example, spreading two fingers apart triggers an event that knows you want to zoom in.
  • Raw Touch Events.  You can handle individual events for touch down, up and move actions on an element, for all supported touch points.  For example, you can track the location of 10 fingers touching the screen at the same time.