Resize the Rectangle at runtime in WPF

Question

4.00/5 (2 votes)

See more:

Hello,

can any one give me an example how to resize and rotate the rectangle with mouse by dragging.

With the mouse events iam able to draw a rectangle on the canvas during runtime,
Now i want to resize the rectangle to desired size and able to rotate the rectangle with mouse at runtime.

C# code:

CSS

private Point startPoint;        
private Rectangle rect;

under MouseLeftbuttondown:

C#

startPoint = e.GetPosition(Canvas1);
                rect = new Rectangle
                {
                    Stroke = Brushes.Blue,
                    StrokeThickness = 1

                };

                Canvas.SetLeft(rect,startPoint.X);
                Canvas.SetTop(rect,startPoint.X);

                Canvas1.Children.Add(rect);

Mouse MOve:

C#

if(e.LeftButton == MouseButtonState.Released || rect == null)
                    return;

                var pos = e.GetPosition(Canvas1);

                var x = Math.Min(pos.X, startPoint.X);
                var y = Math.Min(pos.Y, startPoint.Y);

                var w = Math.Max(pos.X, startPoint.X) - x;
                var h = Math.Max(pos.Y, startPoint.Y) - y;

                rect.Width = w;
                rect.Height = h;

                Canvas.SetLeft(rect, x);
                Canvas.SetTop(rect, y);

MouseLeftbutton up:

rect = null;

Using this code i can draw a rectangle, How can i resize and rotate the rectangle with the mouse from code behind.

any help is much appreciated.

Posted 1-Sep-11 20:24pm

VK k

Updated 1-Sep-11 20:50pm

v4

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

GParkings · Accepted Answer · 2011-09-01T23:13:00

You first need to decide on your interaction method.

1. Do you want a drag operation starting within the rectangle to perform the resize?
2. Do you want the resize to only occur if the drag operation starts on the rectangles edge (or within n pixels of that edge), should the resizing be constrained to the dimension defined by the edge(i.e. dragging the right edge only allows width resize)?
3. Do you want 'grab handle' adorners to appear when you hover the mouse over the rectangle and have these be used to perform the resize?

For 1:

Add a handler to the mouse down, move and up events of the rectangle that adjust the height/width similar to your above code. Make sure to call Mouse.Capture and Mouse.Release on your rectangle (this ensures the mouse move event continues to hit the rectangle even if you move the cursor fast enough that it leaves the rectangle bounds before the rectangle can be resized, this can happen easily with WPF.. its not very speedy with the layout adjustments)

For 2:

You can either replace the rectangle with a composite shape where the borders are their own entity and can therefore handle mouse events differently or you can do some funky logic in the rectangle mouse events to determine if the click location is within n pixels of an edge, then do as in option 1

For 3:

Look into the Adorner class, WPF comes with Adorner layer functionality. This, essentially, provides a means by which UI elements can be 'decorated' by other UI elements in an overlay layer and is the general approach to grab handlers and contextual UI

hope that helps

Resize the Rectangle at runtime in WPF

1 solution

Solution 1

Add your solution here

Preview 0

Resize the Rectangle at runtime in WPF

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us