#715 – 在Canvas中使用Thumb控件实现拖动目标的功能（Using the Thumb Control to Drag Objects on a Canvas）

最新推荐文章于 2023-04-07 15:25:44 发布

翻译最新推荐文章于 2023-04-07 15:25:44 发布 · 1k 阅读

文章标签：

#Thumb

WPF 专栏收录该内容

191 篇文章

订阅专栏

本文介绍如何利用WPF中的Thumb控件实现Canvas上对象的拖拽功能。通过设置Thumb控件的Template属性包含所需拖动的对象，并在DragDelta事件中更新对象位置。

原文地址：https://wpf.2000things.com/2012/12/19/715-using-the-thumb-control-to-drag-objects-on-a-canvas/

你可以使用Thumb 控件在Canvas 上实现简单的拖动控件功能。设置Thumb 控件的Template ，使Template 包含你需要拖动的控件，然后在DragDelta 事件中处理。

下面的例子，在Canvas 面板中包含了三个控件，每一个都被包裹在了Thumb 控件中并且可以被拖动。

<Canvas>
    <Thumb Canvas.Left="10" Canvas.Top="20" Canvas.ZIndex="99"  DragDelta="Thumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate>
                <Image Width="60" Height="60" Source="Crown.jpg"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
    <Thumb Canvas.Left="100" Canvas.Top="60" DragDelta="Thumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate>
                <Image Width="80" Height="100" Source="HenryII.jpg"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
    <Thumb Canvas.Left="30" Canvas.Top="180" DragDelta="Thumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate>
                <Label Content="Westminster, 19-Dec-1154"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
</Canvas>

在 Thumb 控件的 DragDelta 事件处理函数中，设置控件的位置：

private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
    UIElement thumb = e.Source as UIElement;
 
    Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
    Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
}