Click here to Skip to main content
15,566,522 members
Please Sign up or sign in to vote.
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
Updated 1-Sep-11 20:50pm
v4

1 solution

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
 
Share this answer
 
Comments
VK k 5-Sep-11 8:18am    
I have gone for 3.
Adorner class working Perfectly like i wanted.

Thanks a lot
GParkings
Member 14891678 7-Jun-22 10:42am    
Can please post the solution , in which you provided resizing for the above rectangle using adorner

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900