Draggable Canvas trong WPF Sử dụng một 'Thumb'

Question

Trong nhiệm vụ của tôi để thực hiện một cơ chế 'kéo' rất đơn giản cho ứng dụng của tôi (bao gồm nhiều khung vẽ bên trong một khung 'cha'). mã:

(Hiển thị chỉ các bit có liên quan đến tiết kiệm không gian)

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

Có vẻ như hoạt động, ngẫu nhiên! Dường như đi theo chuyển động của chuột nhưng tôi gặp sự cố khi diễn giải DragDeltaEventArgs, gây ra chuyển động rất không ổn định của canvas. Thật khó giải thích được vì vậy đây là một đoạn video ngắn mà tôi đã chụp được: http://img84.imageshack.us/img84/6614/drag.mp4

Bất kỳ nhận xét/đề xuất nào sẽ được đánh giá cao vì tôi đã nhìn chằm chằm vào điều này một lúc và không thể tìm ra làm gì với nó :(

Answer 1

những thay đổi theo chiều ngang và dọc là số tiền chuyển từ sự kiện trước đó, do đó bạn cần phải thêm chúng vào vị trí hiện tại.

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

bạn cũng cần phải thiết lập một vị trí bắt đầu cho vải nếu không bạn sẽ nhận được NaN.

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