Re: Keep element in canvas when dragging it - WPF Discussion Boards

1-Apr-09 20:19

Hi,

I use adorners to move elements in a canvas but I want that those elements stay in the canvas bounderies. So when I drag an element over one of the bounderies, it should stay against that boundery and not cross it.

Now I only check the top and left bounderies with the Canvas.GetLeft and Canvas.GetTop. The width and height of the canvas is variable. Anybody has an idea how I can prevent the elements to cross the right and bottom bounderies?

Thx

ABitSmart1-Apr-09 21:17

1-Apr-09 21:17

Have you tried ClipToBounds[^] ?

How are you implementing the drag/drop ?

Pauwels Bart1-Apr-09 23:30

1-Apr-09 23:30

I hadn't tried it before but ClipToBounds doesn't work.

When I add a new UIElement (like an image) to the Canvas, I adorn it. That adorner adds a Thumb to each side of the UIElement and that thumbs handles the drag function.

// Handler for moving.
private void HandleMove(object sender, DragDeltaEventArgs args)
{
    // Horizontal position.
    if (StanagCanvas.GetLeft(this.AdornedElement) + args.HorizontalChange < 0)
    {
        // Crossing left boundary.
        StanagCanvas.SetLeft(this.AdornedElement, 0);
    }
    else if (StanagCanvas.GetRight(this.AdornedElement) - args.HorizontalChange < 0)
    {
        // Crossing right boundary.
        StanagCanvas.SetRight(this.AdornedElement, 0);
    }
    else
    {
        StanagCanvas.SetLeft(this.AdornedElement, StanagCanvas.GetLeft(this.AdornedElement) + args.HorizontalChange);
    }

    // Vertical position.
    if (StanagCanvas.GetTop(this.AdornedElement) + args.VerticalChange < 0)
    {
        // Crossing top boundary.
        StanagCanvas.SetTop(this.AdornedElement, 0);
    }
    else if (StanagCanvas.GetBottom(this.AdornedElement) - args.VerticalChange < 0)
    {
        // Crossing bottom boundary.
        StanagCanvas.SetBottom(this.AdornedElement, 0);
    }
    else
    {
        StanagCanvas.SetTop(this.AdornedElement, StanagCanvas.GetTop(this.AdornedElement) + args.VerticalChange);
    }
}

(StanagCanvas derives from Canvas)

Offcourse the Right and Bottom properties don't work because I allready use the Left and Top properties. The element doesn't cross the left and top boundery of the canvas.

I hope this is enough information.

ABitSmart2-Apr-09 5:05

2-Apr-09 5:05

You could do it without the Right/Top properties. Something like,

else if ( (StanagCanvas.GetLeft(this.AdornedElement) + this.AdornedElement.Width + args.HorizontalChange) > yourCanvas.Width )
{
    // Crossing right boundary.
    StanagCanvas.SetLeft(this.AdornedElement, yourCanvas.Width - this.AdornedElement.Width);
}

Pauwels Bart2-Apr-09 7:22

Re: Keep element in canvas when dragging it [modified]

2-Apr-09 7:22

I tried that already. The problem with that is that I don't have a reference to the canvas so I can't get the width of it. Or am I totally wrong Confused | :confused:

(It is weekend now for me so I can't recheck it but in a few days my mind is clear again and I can get a fresh start)

That adorner class (derives from Adorner like you know) is separated from my canvas class. I only call it when initializing a new UIElement on the canvas to adorn that element (and it stays adorned until I close the program or the UIElement is deleted). I guess that after I have added the adorner, that adorner only knows his element (this.AdornedElement) and nothing else. The actions I take from then with that adorner, can only affect Attached Properties (Like SetLeft, ... + I have made some extra attached properties in my Canvas class).

I can be totally wrong. If you want to know, I'm only programming for a few months without a proper eduction for it (I had programming on school but only basics). I'm learning it all myself (C# and WPF) and I need to make program for a company where I'm kind of an intern (1 year internship in a foreign country after getting my degree to get some experience before going to work in my own country).

Hope you can say that I'm wrong and it is that simple (but I missed something) Poke tongue | ;-P

ABitSmart2-Apr-09 7:50

2-Apr-09 7:50

Pauwels Bart wrote:
private void HandleMove(object sender, DragDeltaEventArgs args)

Who is the sender ? Is it the element in canvas ? If yes, you can do something like this,

FrameworkElement parent = ((sender as FrameworkElement).Parent as FrameworkElement;
//((sender as FrameworkElement).Parent should give you the Canvas

EDIT: forgot to mention, you can then get the Width parent.Width

modified on Thursday, April 2, 2009 2:15 PM

Pauwels Bart2-Apr-09 8:45

2-Apr-09 8:45

That looks like a good answer Big Grin | :-D

I have tried to call the parent with the sender but that didn't work. That was probably because I didn't parse it as a FrameworkElement or something like that.

I wouldn't know what to do if this site and forum didn't exists. Thx very much for the help. Thumbs Up | :thumbsup:

I will try it and let you know if it worked!

Pauwels Bart4-Apr-09 18:32

4-Apr-09 18:32

Ok, the sender was not the element in the canvas but the thumb. Luckely I can get the element with "this.AdornedElement" (standard build-in adorner function to get the adorned element).

So, the solution was:

  // Handler for moving.
  private void HandleMove(object sender, DragDeltaEventArgs args)
  {
      FrameworkElement element = this.AdornedElement as FrameworkElement;
      StanagCanvas stanagCanvas = element.Parent as StanagCanvas;

      // Horizontal position.
      if (StanagCanvas.GetLeft(element) + args.HorizontalChange < 0)
      {
          // Crossing left boundary.
          StanagCanvas.SetLeft(element, 0);
      }
      else if (StanagCanvas.GetLeft(element) + element.Width + args.HorizontalChange > stanagCanvas.Width)
      {
          // Crossing right boundary.
          StanagCanvas.SetLeft(element, stanagCanvas.Width - element.Width);
      }
      else
      {
          StanagCanvas.SetLeft(element, StanagCanvas.GetLeft(element) + args.HorizontalChange);
      }

      // Vertical position.
      if (StanagCanvas.GetTop(element) + args.VerticalChange < 0)
      {
          // Crossing top boundary.
          StanagCanvas.SetTop(element, 0);
      }
      else if (StanagCanvas.GetTop(element) + element.Height + args.VerticalChange > stanagCanvas.Height)
      {
          // Crossing bottom boundary.
          StanagCanvas.SetBottom(element, stanagCanvas.Height - element.Height);
      }
      else
      {
          StanagCanvas.SetTop(element, StanagCanvas.GetTop(element) + args.VerticalChange);
      }
}

I just made it to difficult and overlooked this simple sollution! Now the element stays within the bounderies of the canvas.

thx ABitSmart

ABitSmart4-Apr-09 19:42

4-Apr-09 19:42

That's great Smile | :)

Looking at your code, when it crosses the bottom boundary, you are setting the Bottom. Shouldn't it be SetTop ?

Pauwels Bart4-Apr-09 19:54