使用“拇指”在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。如果您有任何意见/建议，将不胜感激，因为我已经盯着它看了一段时间，还是无法弄清楚该怎么做:(

- Hamza

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

- Kris