Resizing Thumb Template Control on Canvas in WPF

Question

I've dynamically placed a user control on a Canvas as the VisualTree root in a Thumb control. I can move the thumb control correctly, but can only correctly re-size the control while resizing from the east, southeast, and south rectangles defined in the user control.

//Instantiate a new Thumb control to be placed on the canvas.
var myThumb = new Thumb();
myThumb.Name = "myThumb";

//Instantiate a new ThumbTemplate and ElementFactory with my user control.
var myThumbTemplate = new ControlTemplate(typeof(Thumb));
myThumbTemplate.VisualTree = new FrameworkElementFactory(typeof(MyUserControl), "myUserControl");

//Set the thumb template to the newly instantiated template.
myThumb.Template = myThumbTemplate;

//Point the DragDelta and DragCompleted events to local methods.
myThumb.DragDelta += new DragDeltaEventHandler(myThumb_DragDelta);
myThumb.DragCompleted += new DragCompletedEventHandler(myThumb_DragCompleted);

//Add the thumb to the canvas control.
this.myCanvas.Children.Add(myThumb);
Canvas.SetZIndex(myThumb, 1);
Canvas.SetTop(myThumb, 75);
Canvas.SetLeft(myThumb, 50);

In the DragDelta method, this approach works to resize the user control from the east resizing rectangle:

var myThumb = sender as Thumb;
if (myThumb != null)
{
    var myUserControl = myThumb.Template.FindName("myUserControl", myThumb) as MyUserControl;
    if (myUserControl != null)
    {
        myUserControl.Width = myUserControl.OldWidth + e.HorizontalChange;
    } 
}

But wherever I attempt to do that plus set the Canvas.Top of the Thumb control (Ie. from the North re-size rectangle), I don't get the results I expected:

double top = Canvas.GetTop(finderThumb) + e.VerticalChange;
myUserControl.Height = myUserControl.OldHeight - e.VerticalChange;
Canvas.SetTop(myThumb, top);

What happens then is that the control moves up and down in the canvas control but only ever re-sizes by one pixel, regardless of the Vertical or Horizontal Change. Any ideas as to why this happens and suggestions for resolving the issue? Thanks!

Answer 1

try to Use this class (ResizeThumb) which is explained in this example WPF Diagram Designer: Part 1

public class ResizeThumb : Thumb
{
    public ResizeThumb()
    {
        DragDelta += new DragDeltaEventHandler(this.ResizeThumb_DragDelta);
    }    

    private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        Control item = this.DataContext as Control;
        if (item != null)
        {
            double deltaVertical, deltaHorizontal;

            switch (VerticalAlignment)
            {
                case VerticalAlignment.Bottom:
                    deltaVertical = Math.Min(-e.VerticalChange, 
                        item.ActualHeight - item.MinHeight);
                    item.Height -= deltaVertical;
                    break;
                case VerticalAlignment.Top:
                    deltaVertical = Math.Min(e.VerticalChange, 
                        item.ActualHeight - item.MinHeight);
                    Canvas.SetTop(item, Canvas.GetTop(item) + deltaVertical);
                    item.Height -= deltaVertical;
                    break;
                default:
                    break;
            }

            switch (HorizontalAlignment)
            {
                case HorizontalAlignment.Left:
                    deltaHorizontal = Math.Min(e.HorizontalChange, 
                        item.ActualWidth - item.MinWidth);
                    Canvas.SetLeft(item, Canvas.GetLeft(item) + deltaHorizontal);
                    item.Width -= deltaHorizontal;
                    break;
                case HorizontalAlignment.Right:
                    deltaHorizontal = Math.Min(-e.HorizontalChange, 
                        item.ActualWidth - item.MinWidth);
                    item.Width -= deltaHorizontal;
                    break;
                default:
                    break;
            }
        }
        e.Handled = true;
    }
}

Answer 2

This example grabbed from MSDN shows it adding e.VerticalChange instead of subtracting. Maybe that is the issue?

void onDragDelta(object sender, DragDeltaEventArgs e)
{
    //Move the Thumb to the mouse position during the drag operation
    double yadjust = myCanvasStretch.Height + e.VerticalChange;
    double xadjust = myCanvasStretch.Width + e.HorizontalChange;
    if ((xadjust >= 0) && (yadjust >= 0))
    {
        myCanvasStretch.Width = xadjust;
        myCanvasStretch.Height = yadjust;
        Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) +
                                e.HorizontalChange);
        Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) +
                                e.VerticalChange);
        changes.Text = "Size: " +
                        myCanvasStretch.Width.ToString() +
                         ", " +
                        myCanvasStretch.Height.ToString();
    }
}