title: Rotate, scale and pan element in UWP
body: <p>My goals are quite simple. I want to be able to do multiple transformation of an image in my UWP application using primarily touch screen gestures. More precise I want to handle each manipulations like</p>
  
  <blockquote>
    <p>Pan (Translate) - One finger gesture to pan image around the canvas.</p>
    
    <p>Scale - pinch to zoom, use center of gestures as zoom center.</p>
    
    <p>Rotate - Standard two finger gesture, use center of gesture as rotation center.</p>
  </blockquote>
  
  <p>I have created a very simple POC, which can be found <a href="https://github.com/byrialsen/UwpGesturesManipulations" rel="nofollow noreferrer">here</a></p>
  
  <p>The POC is quite simple and looks like this</p>
  
  <pre><code>&lt;Page
      x:Class="GesturesManipulations.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:GesturesManipulations"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"&gt;
  
      &lt;Canvas x:Name="container" Background="Silver"&gt;
          &lt;Image
              x:Name="image"
              Stretch="Uniform"
              Canvas.Left="100" Canvas.Top="200"
              Source="Assets/windows10-uwp.jpg"
              ManipulationMode="TranslateX,TranslateY,Scale,Rotate"
              ManipulationDelta="OnManipulationDelta"&gt;
  
              &lt;Image.RenderTransform&gt;
                  &lt;TransformGroup&gt;
                      &lt;ScaleTransform x:Name="scaleTransform" /&gt;
                      &lt;RotateTransform x:Name="rotateTransform" /&gt;
                      &lt;TranslateTransform x:Name="translateTransform" /&gt;
                  &lt;/TransformGroup&gt;
              &lt;/Image.RenderTransform&gt;
          &lt;/Image&gt;
      &lt;/Canvas&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>[codebehind]</p>
  
  <pre><code>private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
  {
      FrameworkElement origin = sender as FrameworkElement;
      FrameworkElement parent = origin.Parent as FrameworkElement;
  
      var localCoords = e.Position;
      var relativeTransform = origin.TransformToVisual(parent);
      Point parentContainerCoords = relativeTransform.TransformPoint(localCoords);
      var center = parentContainerCoords;
  
      // translate/panning
      translateTransform.X += e.Delta.Translation.X;
      translateTransform.Y += e.Delta.Translation.Y;
  
      rotateTransform.CenterX = center.X;
      rotateTransform.CenterY = center.Y;
      rotateTransform.Angle += e.Delta.Rotation;
  
      scaleTransform.CenterX = center.X;
      scaleTransform.CenterY = center.Y;
      scaleTransform.ScaleX *= e.Delta.Scale;
      scaleTransform.ScaleY *= e.Delta.Scale;
  }
  </code></pre>
  
  <p>Overall the functionality seems to works. But it also seems like the transform center has some problems. Starting a new gestures really often the image makes a jumps/offset and manipulations sometimes use the wrong center.</p>
  
  <p>I have tried a lot of stuff over the last few days but I can't seem to get hold of the real problem. Maybe I am just doing this to simple. Do I have to do stuff in some of the other manipulation events. Hope someone can help me out. </p>
  
  <p>Thanks in advance.</p>