title: pinch to zoom,drag an image anywhere on the screen in windows phone 8 apps
body: <p>once again hi everybody., recently i have created face changer application for windows phone 8  devices where i have designed a page with two image control where </p>
  
  <p>1 st image as background and 2 nd image control is foreground.</p>
  
  <p>i have added " GestureListener " to my 1 st image control (background) where i have to "Pinch , Zoom in, zoom out , drag" that background image using "toolkit:GestureService.GestureListener ". </p>
  
  <p>i did everything fine like i can able to pinch , zoom, drag an image successfully... But,</p>
  
  <p>the problem is " I Can't able to Pinch or drag the image from anywhere i touch my finger(s) on the screen"., so that the pinch zoom or drag is much difficult for me to zoom in/out or drag an image .,</p>
  
  <p>But in I-Phone/i-pad/i-pod &amp; all Android devices i can able to pinch to zoom in/out or drag an image from touching anywhere on the screen.,</p>
  
  <p>like already i said my 1 st image is background which can be added gesture control and 2 nd image is normal image control which cant zoom or drag., </p>
  
  <p>Here is my code.,</p>
  
  <p>my XAML Code :</p>
  
  <pre><code>&lt;Grid x:Name="ContentPanel" Grid.RowSpan="2"&gt;
      &lt;Canvas x:Name="screenArea" Width="400" Height="580" &gt;
  
          &lt;Image x:Name="myImage" Width="400" Height="580"  RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache" &gt;
              &lt;Image.RenderTransform&gt;
                  &lt;TransformGroup&gt;
                      &lt;CompositeTransform x:Name="MyMustacheTransformation" /&gt;
                  &lt;/TransformGroup&gt;
              &lt;/Image.RenderTransform&gt;
              &lt;toolkit:GestureService.GestureListener&gt;
                  &lt;toolkit:GestureListener PinchStarted="OnPinchStarted"
                                           PinchDelta="OnPinchDelta"
                                           DragDelta="OnDragDelta"/&gt;
              &lt;/toolkit:GestureService.GestureListener&gt;
          &lt;/Image&gt;
          &lt;Image x:Name="frameImage" Width="400" Height="580" Stretch="Fill"/&gt;
      &lt;/Canvas&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>And my CS code for pinch_start, Drag_delta, pinch_delta are</p>
  
  <pre><code>private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
  {
      _initialAngle = MyMustacheTransformation.Rotation;
      _initialScale = MyMustacheTransformation.ScaleX;
  }
  
  private void OnPinchDelta(object sender, PinchGestureEventArgs e)
  {
      MyMustacheTransformation.Rotation = _initialAngle + e.TotalAngleDelta;
      MyMustacheTransformation.ScaleX = _initialScale * e.DistanceRatio;
      MyMustacheTransformation.ScaleY = _initialScale * e.DistanceRatio; 
  }
  
  private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
  {
      Image rect = sender as Image;
      TranslateTransform transform = rect.RenderTransform as TranslateTransform;
  
      MyMustacheTransformation.TranslateX += e.HorizontalChange;
      MyMustacheTransformation.TranslateY += e.VerticalChange;
  }
  </code></pre>
  
  <p>I Hope you can understand what am asking and sorry if my words are not clear., </p>
  
  <p>if you ll already used face changer applications on either Android/i-phone/pod/pad devices means they can understand easily what am expecting., </p>
  
  <p>MY Goal Is : </p>
  
  <p>" i can able to Pinch to Zoom in/out , drag an image from touching anywhere on the layout.. like in i-phone/pod/pad &amp; android devices"</p>
  
  <p>I have struggle with couple of weeks., please give some solutions.,</p>
  
  <p>i you give any sample code means that could more useful for me.,</p>
  
  <p>Thanks in advance guys.,</p>