Develop Reference

Not able to draw rectangle on Wpf canvas from lower right corner to upper left corner

I am implementing functionality to allow user to draw rectangle on a Wpf canvas at run time by dragging mouse.I am currently able to able to draw the rectangle when I drag mouse from top left corner to bottom left, but the rectangle is not visible when I drag mouse from bottom left corner to top.Below is the xaml code that I am using:
<Canvas x:Name="CanvasContainer" MouseLeftButtonDown="CanvasContainer_MouseLeftButtonDown" MouseLeftButtonUp="CanvasContainer_MouseLeftButtonUp" MouseMove="CanvasContainer_MouseMove" >
<Rectangle x:Name="RectangleMarker" Canvas.Left="0" Stroke="Red" Width="0" Height="0" Panel.ZIndex="1"></Rectangle>
<Line x:Name="LineMarker" Stroke="Red" X1="0" Y1="0" X2="0" Y2="0"></Line>
<Image Canvas.Left="0" Canvas.Top="0" x:Name="PdfImage" RenderTransformOrigin="0.5,0.5" MouseWheel="PdfImage_MouseWheel" ClipToBounds="True" Panel.ZIndex="0">
<Image.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="1" CenterX="0.5" CenterY="0.5" />
</Image.LayoutTransform>
</Image>
</Canvas>
Below are the event handling to update rectangle's position according to mouse position.
private void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
try
{
Point startPoint = Mouse.GetPosition(CanvasContainer);
Canvas.SetLeft(RectangleMarker, startPoint.X);
Canvas.SetTop(RectangleMarker,startPoint.Y);
}
catch (Exception ex)
{
}
}
private void CanvasContainer_MouseMove(object sender, MouseEventArgs e)
{
try
{
if (e.LeftButton == MouseButtonState.Pressed)
{
Point endPoint = Mouse.GetPosition(CanvasContainer);
Point startPoint = new Point((double)RectangleMarker.GetValue(Canvas.LeftProperty), (double)RectangleMarker.GetValue(Canvas.TopProperty));
double x = Math.Min(startPoint.X, endPoint.X);
double y = Math.Min(startPoint.Y, endPoint.Y);
double width = endPoint.X - startPoint.X;
double height = endPoint.Y - startPoint.Y;
if (width < 0)
{
x = startPoint.X + width;
}
if (height < 0)
{
y = startPoint.Y + height;
}
RectangleMarker.Width = Math.Abs(width);
RectangleMarker.Height = Math.Abs(height);
if (x!=startPoint.X)
{
Canvas.SetLeft(RectangleMarker, x);
}
else if(y!=startPoint.Y)
{
Canvas.SetTop(RectangleMarker, y);
}
}
}
catch (Exception ex)
{
}
}

Better use a Path with a RectangleGeometry:
<Canvas Background="Transparent"
MouseLeftButtonDown="CanvasContainer_MouseLeftButtonDown"
MouseLeftButtonUp="CanvasContainer_MouseLeftButtonUp"
MouseMove="CanvasContainer_MouseMove">
<Path Stroke="Red">
<Path.Data>
<RectangleGeometry x:Name="selectionRect"/>
</Path.Data>
</Path>
</Canvas>
Code behind:
private Point? startPoint;
private void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var element = (UIElement)sender;
element.CaptureMouse();
startPoint = e.GetPosition(element);
}
private void CanvasContainer_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
((UIElement)sender).ReleaseMouseCapture();
startPoint = null;
}
private void CanvasContainer_MouseMove(object sender, MouseEventArgs e)
{
if (startPoint.HasValue)
{
selectionRect.Rect = new Rect(
startPoint.Value, e.GetPosition((IInputElement)sender));
}
}

As I mentioned earlier in comment your problem is not drawing, but resizing.
When resizing rectangle there are 4 possible directions, 4 sides and 4 corners. So it's kind of complicated.
The easiest way is to simply remember start mouse position and then check where is the new position, drawing rectangle between them. Obviously new mouse position can be either of corners, depending in which direction mouse was moved in relation to start point.
So:
Point _start;
void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) =>
_start = Mouse.GetPosition(CanvasContainer);
void CanvasContainer_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var mouse = Mouse.GetPosition(CanvasContainer);
Canvas.SetLeft(RectangleMarker, _start.X > mouse.X ? mouse.X : _start.X);
Canvas.SetTop(RectangleMarker, _start.Y > mouse.Y ? mouse.Y : _start.Y);
RectangleMarker.Width = Math.Abs(mouse.X - _start.X);
RectangleMarker.Height = Math.Abs(mouse.Y - _start.Y);
}
}
Math.Abs will handle resizing for either positive or negative change, while for changing position we still need a conditional check to determine which point, start or new mouse, is the top-left corner.
Demo:

How can I make a Rectangle on a canvas which is draggable?

I have these three functions to trigger the events. I already have a static version of my needs, but I need a dynamically version of it.
bool captured = false;
double x_shape, x_canvas, y_shape, y_canvas;
UIElement source = null;
private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
source = (UIElement)sender;
Mouse.Capture(source);
captured = true;
x_shape = Canvas.GetLeft(source);
x_canvas = e.GetPosition(canvasPreview).X;
y_shape = Canvas.GetTop(source);
y_canvas = e.GetPosition(canvasPreview).Y;
}
private void MouseMove(object sender, MouseEventArgs e)
{
//MessageBox.Show("test");
if (captured)
{
double x = e.GetPosition(canvasPreview).X;
double y = e.GetPosition(canvasPreview).Y;
x_shape += x - x_canvas;
Canvas.SetLeft(source, x_shape);
x_canvas = x;
y_shape += y - y_canvas;
Canvas.SetTop(source, y_shape);
y_canvas = y;
}
}
private void MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(null);
captured = false;
}
I have made a canvas in WPF called 'canvasPreview', I want to add the rectangle (currently in the static version I am using an ellipse) to the canvas, it must be draggable with above functions. It is already working, but it have to be dynamically.
I hope you can help me, thank you in advance!

I'm sure this sample code will help you.
XAML:
<Grid Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button x:Name="addRectangleButton" Content="Add Rectngle" Click="addRectangleButton_Click"/>
</StackPanel>
<Canvas Grid.Row="1" x:Name="canvas" Margin="0,12,0,0">
<Rectangle x:Name="rectangle" Width="100" Height="50" Fill="RoyalBlue" MouseDown="rectangle_MouseDown" MouseMove="rectangle_MouseMove" MouseUp="rectangle_MouseUp" Canvas.Left="0" Canvas.Top="0"/>
</Canvas>
</Grid>
C#:
bool drag = false;
Point startPoint;
public MainWindow()
{
InitializeComponent();
}
// this creates and adds rectangles dynamically
private void addRectangleButton_Click(object sender, RoutedEventArgs e)
{
// create new Rectangle
Rectangle rectangle = new Rectangle();
// assign properties
rectangle.Width = 100;
rectangle.Height = 50;
rectangle.Fill = new SolidColorBrush(Colors.RoyalBlue);
// assign handlers
rectangle.MouseDown += rectangle_MouseDown;
rectangle.MouseMove += rectangle_MouseMove;
rectangle.MouseUp += rectangle_MouseUp;
// set default position
Canvas.SetLeft(rectangle, 0);
Canvas.SetTop(rectangle, 0);
// add it to canvas
canvas.Children.Add(rectangle);
}
private void rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
// start dragging
drag = true;
// save start point of dragging
startPoint = Mouse.GetPosition(canvas);
}
private void rectangle_MouseMove(object sender, MouseEventArgs e)
{
// if dragging, then adjust rectangle position based on mouse movement
if (drag)
{
Rectangle draggedRectangle = sender as Rectangle;
Point newPoint = Mouse.GetPosition(canvas);
double left = Canvas.GetLeft(draggedRectangle);
double top = Canvas.GetTop(draggedRectangle);
Canvas.SetLeft(draggedRectangle, left + (newPoint.X - startPoint.X));
Canvas.SetTop(draggedRectangle, top + (newPoint.Y - startPoint.Y));
startPoint = newPoint;
}
}
private void rectangle_MouseUp(object sender, MouseButtonEventArgs e)
{
// stop dragging
drag = false;
}

Draggable silverlight user control

I created a draggaable user control in silverlight, but having issues in moving the control inside page. Actually the issue is, dragged control moves out of page when dragging which i don't want. I want the control should drag inside the parent control only.
Any help/suggestion would be appreciated.
Below is the code used to perform operation:
XAML:
<Grid x:Name="LayoutRoot" >
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform x:Name="LocalTranslateTransform"/>
</TransformGroup>
</Grid.RenderTransform>
C#:
private void OnToolbarClicked(object sender, MouseButtonEventArgs e)
{
mouseDownInToolbar = true;
DragOffset = e.GetPosition(LayoutRoot);
toolbarBorder.CaptureMouse();
}
private void OnToolbarMoving(object sender, MouseEventArgs e)
{
if (mouseDownInToolbar)
{
// we want to move it based on the position of the mouse
moveUserControl(e);
}
}
private void moveUserControl (MouseEventArgs e)
{
Point mousePos = e.GetPosition(LayoutRoot);
Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X);
Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y);
LocalTranslateTransform.X = newX;
LocalTranslateTransform.Y = newY;
}
private void OnToolbarReleased(object sender, MouseButtonEventArgs e)
{
mouseDownInToolbar = false;
toolbarBorder.ReleaseMouseCapture();
}

When you use TranslateTransform, you're sending instructions to the compositor thread to display the element at X/Y offsets. It does not obey the rules of your panel and any visual tree member. So, you have to tell the compositor thread about the boundaries. Use Clip like this:
<Grid Width="500" Height="500">
<Grid.Clip>
<RectangleGeometry Rect="0,0,500,500" />
</Grid.Clip>
<Grid x:Name="LayoutRoot">
<!-- This is the element being dragged by the mouse -->
</Grid>
</Grid>
The RectangleGeometry will create a boundary where child elements are allowed to appear. Anything outside, will be clipped.
After doing the desired changes this is how it looked.
You need to create a constraint.
Calculate if you're transforming the actual control outside the bounds of the parent.
private void moveUserControl (MouseEventArgs e)
{
Point mousePos = e.GetPosition(LayoutRoot);
Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X);
Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y);
var minX = 0;
var maxX = 500 - ActualWidth; // 500 is parent width
var minY = 0;
var maxY = 500 - ActualHeight; // 500 is parent height
if (newX < minX)
{
newX = minX;
}
else if (newX > maxX)
{
newX = maxX;
}
if (newY < minY)
{
newY = minY;
}
else if (newY > maxY)
{
newY = maxY;
}
LocalTranslateTransform.X = newX;
LocalTranslateTransform.Y = newY;
}

How do I drag and move an image around inside a Grid in WPF?

How do I drag and move an image around inside a Grid?
Have been trying to solve my problem for days, to no outcome.. here is my code for the xaml.
<Canvas>
<Grid Canvas.Left="134" Canvas.Top="98" Height="500" Width="1010">
<ContentControl x:Name="poolContainer">
</ContentControl>
<Grid DragEnter="Grid_DragEnter" AllowDrop="True">
<Image Canvas.Left="902" Canvas.Top="324" Height="42" Name="CueStick" Visibility="Visible" Source="/NYP_FYPJ_VP2014;component/Images/cue.png" Margin="780,230,-92,228" Drop="CueStick_DragDrop" MouseMove="CueStick_MouseMove" MouseDown="CueStick_MouseDown" MouseUp="CueStick_MouseUp"></Image>
</Grid>
</Grid>
<RepeatButton Canvas.Left="1175" Canvas.Top="397" Content="Rotate" Height="23" Name="buttonUp" Width="74" Click="buttonUp_Click" />
</Canvas>
Here is my xaml.cs code for the image drag
bool drag = false;
int x = 0;
int y = 0;
private bool isPictureReadyToDrag;
private void SetPosition()
{
CueStick.Location = new Point(MousePosition.X - this.Left - CueStick.Width / 2,
MousePosition.Y - this.Top - CueStick.Height);
}
private void CueStick_MouseMove(object sender, MouseEventArgs e)
{
if (isPictureReadyToDrag)
SetPosition();
}
private void CueStick_MouseDown(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = true;
SetPosition();
}
private void CueStick_MouseUp(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = false;
}

You are doing wrong in several places.
The image is put inside a Grid, its position is solely controlled by the Margin property, Canvas.Top/Left do not take effect and you can remove them.
<Image Canvas.Left="202" Canvas.Top="324" Margin="780,230,-92,228"
and in the code behind, set the image's Margin property, not Location (there is no such property).
CueStick.Margin = new Thickness(...
b. Set an explicit Width to the image, because you are using this value in the code behind.
<Image Width="229" Height="42"
c. You are not using the mouse position correctly; you can get it from MouseEventArgs/MouseButtonEventArgs, something like
private void CueStick_MouseDown(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = true;
double x = e.GetPosition(grid1).X;
double y = e.GetPosition(grid1).Y;
SetPosition(x, y);
}
private void SetPosition(double x, double y)
{
CueStick.Margin = new Thickness(x - CueStick.Width / 2,
y - CueStick.Height / 2, 0, 0);
}
Noted that grid1 is the containing Grid of the image.
<Grid x:Name="grid1" DragEnter="Grid_DragEnter" AllowDrop="True">
<Image...
The hard work of debugging to get the correct Margin is left to you.

Combining RotateTransform and TranslateTransform

I am using the Thumb class to let the user drag and drop an image across a canvas. When the right button gets pressed, i want the user to be able to rotate the image. The rotation is based around the center of the image. I have the following XAML Code
<Grid>
<Canvas Background="Red" Grid.RowSpan="2" x:Name="canvas"
PreviewMouseRightButtonUp="Canvas_MouseUp"
PreviewMouseMove="Canvas_MouseMove">
<UserControl MouseRightButtonDown="Canvas_MouseDown" RenderTransformOrigin="0.5,0.5">
<Thumb Name="myRoot" DragDelta="myRoot_DragDelta">
<Thumb.Template>
<ControlTemplate>
<Grid>
<Image Source="/WpfApplication1;component/someImage.png" />
<Rectangle Stroke="#FF0061CE" StrokeThickness="1" Width="230" Height="250" />
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
<UserControl.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rotateTransform" />
<TranslateTransform x:Name="translateTransform" />
</TransformGroup>
</UserControl.RenderTransform>
</UserControl>
</Canvas>
</Grid>
And this code behind
bool isMouseDown = false;
Point pos;
double lastAngle = 0;
private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
isMouseDown = true;
lastAngle = rotateTransform.Angle;
pos = Mouse.GetPosition(canvas);
}
private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
isMouseDown = false;
}
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
if (!isMouseDown) return;
var curPos = Mouse.GetPosition(canvas);
rotateTransform.Angle = lastAngle + (pos.Y - curPos.Y);
}
private void myRoot_DragDelta(object sender, DragDeltaEventArgs e)
{
translateTransform.X += e.HorizontalChange;
translateTransform.Y += e.VerticalChange;
}
It works if i only drag and drop the image around the screen and rotate the image a small amount (50 degrees in any direction seems ok). However manipulating it more than that and the image starts move around the screen unpredictibly.
I have tried moving the transformations to different controls, so to not to mix them up but have not received an acceptable result.
How can i get my code to behave like i want?
UPDATE: This is driving my crazy. I have changed the code and XAML to use a MatrixTransformation instead
private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
if (!isMouseDown) return;
var curPos = Mouse.GetPosition(canvas);
angle = (lastAngle + (pos.Y - curPos.Y)) % 360;
UpdateMatrixTransform();
}
private void myRoot_DragDelta(object sender, DragDeltaEventArgs e)
{
posX += e.HorizontalChange;
posY += e.VerticalChange;
UpdateMatrixTransform();
}
void UpdateMatrixTransform()
{
Matrix m = new Matrix();
m.Rotate(angle);
m.OffsetX = posX;
m.OffsetY = posY;
matrixT.Matrix = m;
}
In my mind, this should work: First, rotate the graphic than move it to the offset. It does not work like i expect it to. It rotates the image, but than moves it strangely in spiral fashion outwards if i keep moving the mouse. No matter what i do, and in what order i execute my transformations, it wont work.

I'm not sure why you're using a UserControl to wrap the Thumb since it should be able to act as the root element here. Here is a solution that involes scrapping the use of TranslateTransform and instead using Canvas.Left and Canvas.Top properties:
EDIT: Updated Answer
Here's the XAML:
<Canvas x:Name="canvas">
<Thumb Name="myRoot"
Canvas.Left="0" Canvas.Top="0"
DragDelta="myRoot_DragDelta"
MouseMove="myRoot_MouseMove"
MouseDown="myRoot_MouseDown"
MouseUp="myRoot_MouseUp">
<Thumb.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5, 0.5">
<Rectangle Fill="AliceBlue"
Stroke="#FF0061CE"
StrokeThickness="1"
Width="100" Height="100"/>
<Grid.RenderTransform>
<RotateTransform x:Name="rotateTransform" />
</Grid.RenderTransform>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
And here's the code behind:
public partial class TestWindow : Window
{
public TestWindow()
{
InitializeComponent();
}
Point? lastPosition = null;
RotateTransform rotateTransform;
private void myRoot_MouseDown(object sender, MouseButtonEventArgs e)
{
lastPosition = null;
if (e.ChangedButton == MouseButton.Right)
myRoot.CaptureMouse();
}
private void myRoot_MouseUp(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Right)
myRoot.ReleaseMouseCapture();
}
private void myRoot_MouseMove(object sender, MouseEventArgs e)
{
if (e.RightButton == MouseButtonState.Pressed)
{
Point curPosition = Mouse.GetPosition(myRoot);
if (lastPosition != null)
{
Point centerPoint = new Point(myRoot.ActualWidth / 2, myRoot.ActualWidth / 2);
if (rotateTransform == null)
rotateTransform = (RotateTransform)myRoot.Template.FindName("rotateTransform", myRoot);
rotateTransform.Angle = Math.Atan2(curPosition.Y - centerPoint.Y, curPosition.X - centerPoint.X) * 100;
}
lastPosition = curPosition;
e.Handled = true;
}
}
private void myRoot_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
Canvas.SetLeft(myRoot, Canvas.GetLeft(myRoot) + e.HorizontalChange);
Canvas.SetTop(myRoot, Canvas.GetTop(myRoot) + e.VerticalChange);
}
}

You have to tell the RotateTransform that you want to rotate around the center of the object rather than the center of the coordinate system, which is the default. To do that, set the CenterX and CenterY properties of the RotateTransform to the center of the object.