title: Draggable Canvas in WPF Using a 'Thumb'
body: <p>On my quest to implement a very simple 'drag' mechanism to my application (which consists of multiple canvasses nested inside a 'parent' canvas) I've come up with the following bits of code:</p>
  
  <p>(Showing only the relevant bits to save space)</p>
  
  <p>MainWindow.xaml</p>
  
  <pre><code>    &lt;Canvas Name="parentCanvas" Background="#FFE8CACA"&gt;
          &lt;Canvas Name="myCanvas" Height="100" Width="200" Background="#FFB4FFB4"&gt;
              &lt;Thumb Name="myThumb" Canvas.Left="0" Canvas.Top="0" Background="Blue" Width="200" Height="20" DragDelta="onDragDelta" /&gt;
          &lt;/Canvas&gt;
  
          &lt;!-- debug --&gt;
          &lt;Button Content="Zero" Height="51" Name="button1" Width="46" Click="button1_Click" Canvas.Left="14" Canvas.Top="302" /&gt;
          &lt;Label Name="pos" Width="499" Canvas.Left="77" Canvas.Top="302" Height="26" /&gt;
          &lt;Label Name="changes" Height="28" Canvas.Left="77" Canvas.Top="325" Width="499" /&gt;
      &lt;/Canvas&gt;
  </code></pre>
  
  <p>MainWindow.xaml.cs</p>
  
  <pre><code>    void onDragDelta(object sender, DragDeltaEventArgs e)
      {
          Canvas.SetLeft(myCanvas, e.HorizontalChange);
          Canvas.SetTop(myCanvas, e.VerticalChange);
  
          //debug info
          pos.Content = "Left: " + Canvas.GetLeft(myCanvas) + ", Top: " + Canvas.GetTop(myCanvas);
          changes.Content = "Horizontal: " + e.HorizontalChange + ", Vertical: " + e.VerticalChange;
      }
  
      private void button1_Click(object sender, RoutedEventArgs e)
      {
          Canvas.SetLeft(myCanvas, 0);
          Canvas.SetTop(myCanvas, 0);
      }
  </code></pre>
  
  <p>Which seems to work, randomly! It seems to follow the mouse movements but I am having trouble interpreting the <code>DragDeltaEventArgs</code>, which causes a very unstable movement of the canvas. It's kind of hard to explain so here is a short video I've captured of it: <a href="http://img84.imageshack.us/img84/6614/drag.mp4" rel="nofollow noreferrer">http://img84.imageshack.us/img84/6614/drag.mp4</a></p>
  
  <p>Any comments/suggestions will be much appreciated as I've been staring at this for a while and can't figure out what to do with it :(</p>