Drawing a rectangle when dragging with a mouse using MVVM in WPF

Question

Below is my haml. I have an image inside the canvas. I want to draw a rectangle on the image when the mouse is dragged onto the image. I have done this successfully in WPF. But now I want to do this in MVVM. Instead of having event handlers in the code behind, I want to have them in my ViewModel. I am using MVVM Foundation to implement MVVM. Below is a link to the MVVM Foundation. http://mvvmfoundation.codeplex.com/

Any help is greatly appreciated.

Xaml

<Canvas Name="cnvImage"> <Image Height="348" HorizontalAlignment="Left" Margin="12,39,0,0" Name="imgPreview" Stretch="Fill" VerticalAlignment="Top" Width="443" Source="/Images/CapturedImage.png" MouseDown="imgCamera_MouseDown" MouseMove="imgCamera_MouseMove" MouseUp="imgCamera_MouseUp" /> </Canvas> 

Code written by code

 // This is the rectangle to be shown when mouse is dragged on camera image. private Point startPoint; private Rectangle rectSelectArea; /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void imgCamera_MouseDown(object sender, MouseButtonEventArgs e) { startPoint = e.GetPosition(cnvImage); // Remove the drawn rectanglke if any. // At a time only one rectangle should be there if (rectSelectArea != null) cnvImage.Children.Remove(rectSelectArea); // Initialize the rectangle. // Set border color and width rectSelectArea = new Rectangle { Stroke = Brushes.LightBlue, StrokeThickness = 2 }; Canvas.SetLeft(rectSelectArea, startPoint.X); Canvas.SetTop(rectSelectArea, startPoint.X); cnvImage.Children.Add(rectSelectArea); } /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void imgCamera_MouseMove(object sender, MouseEventArgs e) { if (e.LeftButton == MouseButtonState.Released || rectSelectArea == null) return; var pos = e.GetPosition(cnvImage); // Set the position of rectangle var x = Math.Min(pos.X, startPoint.X); var y = Math.Min(pos.Y, startPoint.Y); // Set the dimenssion of the rectangle var w = Math.Max(pos.X, startPoint.X) - x; var h = Math.Max(pos.Y, startPoint.Y) - y; rectSelectArea.Width = w; rectSelectArea.Height = h; Canvas.SetLeft(rectSelectArea, x); Canvas.SetTop(rectSelectArea, y); } /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void imgCamera_MouseUp(object sender, MouseButtonEventArgs e) { rectSelectArea = null; } 

I need to know what I need to write in my model viewmodel and, accordingly, what changes are needed in XAML.

Thanks in advance.

Answer 1

A very neat way to implement resizing can be found in this article / project . If you use the DesignerItemStyle implemented here, you can add binding support as follows:

 <Rectangle Style="{StaticResource DesignerItemStyle}" Canvas.Left="{Binding Path=Leftoffset, Mode=TwoWay}" Canvas.Top="{Binding Path=Topoffset, Mode=TwoWay}" Width="{Binding Path=Width, Mode=TwoWay}" Height="{Binding Path=Height, Mode=TwoWay}"> 

This leaves drag and drop for resizing material in pure XAML and uses standard WPF tools to get values ​​in the underlying ViewModels.

Answer 2

Just follow the link below. Visit the code project!

http://www.codeproject.com/Articles/148503/Simple-Drag-Selection-in-WPF ?