#715 – Using the Thumb Control to Drag Objects on a Canvas

You can use the Thumb control for simple dragging of objects on a Canvas.  You set the Template of the Thumb control to contain the actual element to be dragged and then handle the thumb’s DragDelta event.

Below is a Canvas containing three controls, each wrapped in a Thumb and therefore draggable.

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

In the event handler for each of the Thumb controls, we simply adjust the thumb’s position on the Canvas.

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