绘制矩形在WPF使用MVVM时,鼠标拖动 [英] Draw rectangle when mouse dragged using MVVM in WPF
问题描述
下面是我的XAML。我有一个帆布内的图像。我想在图像上绘制矩形时,拖动鼠标在图像上。我在WPF做到了成功。但现在我想这样做的MVVM。与其在code中的事件处理程序的背后,我想有他们在我的视图模型。我使用的 MVVM基金会实施MVVM。下面是一个链接到MVVM基础。 HTTP://mvvmfoundation.$c$cplex.com/
Below is my xaml. I have an image inside a canvas. I want to draw rectangle on the image when mouse is dragged on the image. I did it successfully in WPF. But now I want to do it in MVVM. Instead of having the event handlers in code behind I want to have them in my ViewModel. I am using MVVM Foundation for implementing MVVM. Below is a link to MVVM Foundation. http://mvvmfoundation.codeplex.com/
任何帮助是非常AP preciated。
Any help is highly 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后面
Code written in code behind
// 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;
}
我需要知道我需要在我的视图模型编写,因此什么样的变化,需要在XAML。
I need to know what do I need to write in my viewmodel and accordingly what changes are required in XAML.
在此先感谢。
推荐答案
一个非常简洁的方式实施调整可以的这篇文章/项目。如果您使用实施那里DesignerItemStyle,您可以添加绑定的支持,像这样:
A very neat way of implementing resizing can be found in this article / project. If you use the DesignerItemStyle implemented there, you can add binding support like so :
<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}">
这使得拖动来调整大小的东西在纯XAML和使用标准WPF手段获取值底层的ViewModels。
That leaves the drag to resize stuff in pure XAML and uses standard WPF means to get the values to the underlying ViewModels.
这篇关于绘制矩形在WPF使用MVVM时,鼠标拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!