Lienzo arrastrable en WPF usando un 'Thumb'

Question

En mi intento de implementar un mecanismo de 'arrastre' muy simple para mi aplicación (que consiste en múltiples lienzos anidados dentro de un lienzo 'principal') he encontrado los siguientes bits de código:

(Mostrando sólo los bits relevantes para ahorrar espacio)

MainWindow.xaml

<Canvas Name="parentCanvas" Background="#FFE8CACA"> 
     <Canvas Name="myCanvas" Height="100" Width="200" Background="#FFB4FFB4"> 
      <Thumb Name="myThumb" Canvas.Left="0" Canvas.Top="0" Background="Blue" Width="200" Height="20" DragDelta="onDragDelta" /> 
     </Canvas> 

     <!-- debug --> 
     <Button Content="Zero" Height="51" Name="button1" Width="46" Click="button1_Click" Canvas.Left="14" Canvas.Top="302" /> 
     <Label Name="pos" Width="499" Canvas.Left="77" Canvas.Top="302" Height="26" /> 
     <Label Name="changes" Height="28" Canvas.Left="77" Canvas.Top="325" Width="499" /> 
    </Canvas> 

MainWindow.xaml.cs

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); 
    } 

¡Lo que parece funcionar, al azar! Parece seguir los movimientos del mouse pero tengo problemas para interpretar el DragDeltaEventArgs, lo que causa un movimiento muy inestable del lienzo. Es un poco difícil de explicar así que aquí hay un video corto que capturé de él: http://img84.imageshack.us/img84/6614/drag.mp4

Cualquier comentario/sugerencia será muy apreciado ya que he estado mirando esto por un tiempo y no puedo entender qué que ver con eso :(

Answer 1

los cambios horizontales y verticales son la cantidad trasladó desde el evento anterior, por lo que necesita para añadirlos a la posición actual.

Canvas.SetLeft(myCanvas, Canvas.GetLeft(myCanvas) + e.HorizontalChange); 
Canvas.SetTop(myCanvas, Canvas.GetTop(myCanvas) + e.VerticalChange); 

también es necesario establecer una posición inicial para el lienzo de lo contrario obtendrá NaN.

<Canvas Name="myCanvas" Height="100" Width="200" Background="#FFB4FFB4" Canvas.Left="0" Canvas.Top="0">