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

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

  4. Great, thank you. But how to prevent objects to be dragged outside canvas?

  5. If you want to prevent objects to be dragged outside canvas use following code;

    private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
    UIElement thumb = e.Source as UIElement; //find thumb
    Canvas AccessibleArea = ((sender as Control).Parent as Canvas); //find parent Canvas
    if (!(Canvas.GetLeft(thumb) + e.HorizontalChange > AccessibleArea.ActualWidth – (sender as Control).ActualWidth) //do not pass right maximus
    && !((Canvas.GetLeft(thumb) + e.HorizontalChange) AccessibleArea.ActualHeight – (sender as Control).ActualHeight) // do not pass bottom maximum
    && !((Canvas.GetTop(thumb) + e.VerticalChange) <= 0)) //do not pass top minimum
    {
    Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
    }
    }

  6. David Biggs says:

    If you want to set your thumb position via Right or Bottom, you’ll need to add this to the code.
    Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
    Canvas.SetBottom(thumb, Canvas.GetBottom(thumb) – e.VerticalChange);

    • David Biggs says:

      Sorry make that:
      Canvas.SetRight(thumb, Canvas.GetRight(thumb) – e.HorizontalChange);
      Canvas.SetBottom(thumb, Canvas.GetBottom(thumb) – e.VerticalChange);

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 )

Connecting to %s

%d bloggers like this: