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

715-001
715-002

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

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

  1. Easiest way to implement dragging that I know of in WPF.

  2. David Ngugi says:

    Awesome thank you! simplest method i’ve seen and implemented

  3. rozylb says:

    Great, Thank you!
    A question: I implemented a whole screen inside the thumb template, and would like to block the drag operation from a specific control in it (e.g. a button). Is it possible?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: