'Thumb'을 사용하여 WPF에서 드래그 가능한 캔버스

Question

내 응용 프로그램 ('부모'캔버스 안에 여러 개의 캔버스가 중첩되어 있음)에 매우 간단한 '드래그'메커니즘을 구현하기 위해 다음과 같은 비트를 생각해 냈습니다 코드 :

(에만 해당 비트를 표시하는 저장 공간)

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

,

무작위로 작동하는 것 같습니다! 마우스 움직임을 따르는 것 같지만 캔버스가 매우 불안정한 움직임을 일으키는 DragDeltaEventArgs을 해석하는 데 문제가 있습니다. 설명하기가 어렵습니다. 여기에 제가 캡쳐 한 짧은 비디오가 있습니다 : http://img84.imageshack.us/img84/6614/drag.mp4

나는 잠시 동안 이것을보고 있었으므로 어떤 의견이나 제안도 감사 할 것입니다. 그것으로 할 :(

Answer 1

을 수평 및 수직 변경 사항은 현재의 위치에 추가 할 필요가 있으므로 양이 이전 이벤트 이후로 이동합니다.

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

또한의 시작 위치를 설정해야 그렇지 않으면 NaN을 얻습니다.

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