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">