title: Windows Phone XAML: applying transformation matrix after pinch gesture
body: <p>I move and scale a rectangle within a canvas element with touch gestures. The code is based on this reference: <a href="http://msdn.microsoft.com/en-us/magazine/gg650664.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/magazine/gg650664.aspx</a></p>
  
  <p>The XAML code is as follows:</p>
  
  <pre><code>&lt;Canvas Name="canvas" &gt;
      &lt;Rectangle x:Name="rectangle" Fill="Green"  Height="300" Canvas.Left="0" Stroke="Red" Canvas.Top="0" Width="100" StrokeThickness="3" &gt;
          &lt;Rectangle.RenderTransform&gt;
              &lt;TransformGroup&gt;
                  &lt;MatrixTransform x:Name="previousTransform" /&gt;
  
                  &lt;TransformGroup x:Name="currentTransform"&gt;
                      &lt;ScaleTransform x:Name="scaleTransform" /&gt;
                      &lt;TranslateTransform x:Name="translateTransform" /&gt;
                  &lt;/TransformGroup&gt;
              &lt;/TransformGroup&gt;
          &lt;/Rectangle.RenderTransform&gt;
  
          &lt;toolkit:GestureService.GestureListener&gt;
              &lt;toolkit:GestureListener DragStarted="OnGestureListenerDragStarted"
                               DragDelta="OnGestureListenerDragDelta"
                               DragCompleted="OnGestureListenerDragCompleted"
                               PinchStarted="OnGestureListenerPinchStarted"
                               PinchDelta="OnGestureListenerPinchDelta"
                               PinchCompleted="OnGestureListenerPinchCompleted" /&gt;
          &lt;/toolkit:GestureService.GestureListener&gt;
      &lt;/Rectangle&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p>Dragging:</p>
  
  <pre><code>void OnGestureListenerDragDelta(object sender, DragDeltaGestureEventArgs args)
  {
      translateTransform.X += args.HorizontalChange;
      translateTransform.Y += args.VerticalChange;
  }
  </code></pre>
  
  <p>During pinching the scale transform is updated:</p>
  
  <pre><code>void OnGestureListenerPinchDelta(object sender, PinchGestureEventArgs args)
  {
      scaleTransform.ScaleX = args.DistanceRatio;
      scaleTransform.ScaleY = args.DistanceRatio;
  }
  </code></pre>
  
  <p>When pinching completes I want to get the "real" size and position of the rectangle within the parent canvas. Therefore I tried to apply the transform to the rectangle boundaries:</p>
  
  <pre><code>void OnGestureListenerPinchCompleted(object sender, PinchGestureEventArgs args)
  {
      Rect r = currentTransform.TransformBounds(new Rect(Canvas.GetLeft(rectangle), Canvas.GetTop(rectangle), rectangle.Width, rectangle.Height));
      rectangle.Width = r.Width;
      rectangle.Height = r.Height;
      Canvas.SetLeft(rectangle, r.X);
      Canvas.SetTop(rectangle, r.Y);
  
      // Reset transforms
      previousTransform.Matrix = new Matrix();
      rectangle.RenderTransformOrigin = new Point(0, 0);
  
      scaleTransform.ScaleX = scaleTransform.ScaleY = 1;
      scaleTransform.CenterX = scaleTransform.CenterY = 0;
  
      translateTransform.X = translateTransform.Y = 0;
  }
  </code></pre>
  
  <p>This works fine for translation, but scaling is wrong (the rectangle is scaled but the factor is too big when increasing the scale, and too little when decreasing the scale). How can I get the correct final size of the scaled rectangle?</p>
  
  <p>Regards</p>