C# WPF Resizing issue

Question

I am working on a dashboard application where I would like to let the user resize the widgets on a canvas. Looking around, the best solution to me seemed to use Microsoft's ResizingAdorner class. The example can be found here and the code can be found here (About a quarter way down the page). Everything seemed to work until I clicked one of the widgets (chart controls from ComponentOne ). The bottom right adorner and the top right adorner seemed to appear about the width of the and height from the side of the canvas when ever moved. See example below :

I have been to the StackOverflow question here about using a grid splitter, but this will not work for me since controls will be overlapping grid columns.

I also have been to a similar question , but the first answer does not work at all, and the second answer just merely points to a blog where the gentleman either works for microsoft and created the ResizingAdorner class or just copied the code from the wpf samples site. I have also tried is revised code here but with no luck. Is there a quick fix i'm not seeing

Answer 1

When looking into the code a little deeper, I found a portion that was subtracting the x and y from the desired width and height, even thought I wasn't dragging the adorner yet. so I changed the following code in their example :

protected override Size ArrangeOverride(Size finalSize)
        {
            // desiredWidth and desiredHeight are the width and height of the element that's being adorned.  
            // These will be used to place the ResizingAdorner at the corners of the adorned element.  
            double desiredWidth = AdornedElement.DesiredSize.Width;
            double desiredHeight = AdornedElement.DesiredSize.Height;
            // adornerWidth & adornerHeight are used for placement as well.
            double adornerWidth = this.DesiredSize.Width;
            double adornerHeight = this.DesiredSize.Height;

            topLeft.Arrange(new Rect(-adornerWidth / 2, -adornerHeight / 2, adornerWidth, adornerHeight));
            topRight.Arrange(new Rect(desiredWidth - adornerWidth / 2, -adornerHeight / 2, adornerWidth, adornerHeight));
            bottomLeft.Arrange(new Rect(-adornerWidth / 2, desiredHeight - adornerHeight / 2, adornerWidth, adornerHeight));
            bottomRight.Arrange(new Rect(desiredWidth - adornerWidth / 2, desiredHeight - adornerHeight / 2, adornerWidth, adornerHeight));

            // Return the final size.
            return finalSize;
        }

to the following code:

protected override Size ArrangeOverride(Size finalSize)
        {
            // desiredWidth and desiredHeight are the width and height of the element that's being adorned.  
            // These will be used to place the ResizingAdorner at the corners of the adorned element.  
            double desiredWidth = AdornedElement.DesiredSize.Width;
            double desiredHeight = AdornedElement.DesiredSize.Height;
            // adornerWidth & adornerHeight are used for placement as well.
            double adornerWidth = this.DesiredSize.Width;
            double adornerHeight = this.DesiredSize.Height;

            //Orginal Microsoft code
            //topLeft.Arrange(new Rect(-adornerWidth / 2, -adornerHeight / 2, adornerWidth, adornerHeight));
            //topRight.Arrange(new Rect(desiredWidth - (adornerWidth / 2), - adornerHeight / 2, adornerWidth, adornerHeight));
            //bottomLeft.Arrange(new Rect(-adornerWidth / 2, desiredHeight - adornerHeight / 2, adornerWidth, adornerHeight));
            //bottomRight.Arrange(new Rect(desiredWidth - (adornerWidth / 2), desiredHeight - adornerHeight / 2, adornerWidth, adornerHeight));


            topLeft.Arrange(new Rect(-adornerWidth / 2, -adornerHeight / 2, adornerWidth, adornerHeight));
            topRight.Arrange(new Rect(adornerWidth / 2, -adornerHeight / 2, adornerWidth, adornerHeight));
            bottomLeft.Arrange(new Rect(-adornerWidth / 2, adornerHeight / 2, adornerWidth, adornerHeight));
            bottomRight.Arrange(new Rect(adornerWidth / 2, adornerHeight / 2, adornerWidth, adornerHeight));

            // Return the final size.
            return finalSize;
        }

I haven't experienced any quirks yet, but it seems right.