#715 – Using the Thumb Control to Drag Objects on a Canvas
December 19, 2012 7 Comments
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);
}
About Sean
2,000 Things You Should Know About WPF 
Easiest way to implement dragging that I know of in WPF.
Awesome thank you! simplest method i’ve seen and implemented
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?
Great, thank you. But how to prevent objects to be dragged outside canvas?
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);
}
}
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);
Sorry make that:
Canvas.SetRight(thumb, Canvas.GetRight(thumb) – e.HorizontalChange);
Canvas.SetBottom(thumb, Canvas.GetBottom(thumb) – e.VerticalChange);