title: Drag Image in a Window Phone 7+ Silverlight app
body: <p>Windows Phone 7.5 Silverlight app</p>
  
  <p>I want to let the user drag the image on the page within a restricted area. 
  This image is within a Grid that has other elements.</p>
  
  <p>I will be using GestureListener and have even tried implementing. Below is the code. I have tried after reading few sample articles.</p>
  
  <pre><code>&lt;Image x:Name="imgFootball"  Margin="55,108,55,1" Grid.Row="1" Source="/Ball.png" Height="250" Width="250"&gt;
              &lt;toolkit:GestureService.GestureListener&gt;
                  &lt;toolkit:GestureListener DragDelta="GestureListener_DragDelta"&gt;&lt;/toolkit:GestureListener&gt;
              &lt;/toolkit:GestureService.GestureListener&gt;
              &lt;Image.RenderTransform&gt;
                  &lt;CompositeTransform x:Name="imgImageTranslate" /&gt;
              &lt;/Image.RenderTransform&gt;
          &lt;/Image&gt;
  
  private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
  {
              imgImageTranslate.TranslateY += e.VerticalChange;
              imgImageTranslate.TranslateX += e.HorizontalChange;
  }
  </code></pre>
  
  <p>Now using the above code the dragging <strong>works fine.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/G7kdP.png" alt="enter image description here"></p>
  
  <p><strong>My Problem (Updated 01/19):</strong> I want to set the limit for the dragging area . i.e. I want to add drag to Circle and Triangle. They are allowed to be dragged over other shapes but cannot go over the TextBlocks or the arrows in the corner. All the elements are currently in the Grid.</p>
  
  <p>I tried suggestion as mentioned by Chris and used StackPanel. It limits the behavior but then I am not able to position the elments as shown i.e. in a scattered places. Instead the SP forces me to stack them one over the other Vertically or horizontally. Also other shapes have their own animation like resizing, etc.</p>
  
  <p>Any suggestions?</p>