C# 在WPF中使用MVVM拖动鼠标时绘制矩形
下面是我的xaml。我在画布里有一个图像。当鼠标在图像上拖动时,我想在图像上绘制矩形。我在WPF中成功地做到了这一点。但现在我想在MVVM中实现它。我希望将事件处理程序放在我的ViewModel中,而不是放在代码后面。我正在使用MVVM基础来实现MVVM。下面是MVVM基金会的链接。 非常感谢您的帮助 XAMLC# 在WPF中使用MVVM拖动鼠标时绘制矩形,c#,.net,wpf,mvvm,mvvm-foundation,C#,.net,Wpf,Mvvm,Mvvm Foundation,下面是我的xaml。我在画布里有一个图像。当鼠标在图像上拖动时,我想在图像上绘制矩形。我在WPF中成功地做到了这一点。但现在我想在MVVM中实现它。我希望将事件处理程序放在我的ViewModel中,而不是放在代码后面。我正在使用MVVM基础来实现MVVM。下面是MVVM基金会的链接。 非常感谢您的帮助 XAML <Canvas Name="cnvImage"> <Image Height="348" HorizontalAlignment="Left" Marg
<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>
用代码隐藏编写的代码
// 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;
}
//这是在相机图像上拖动鼠标时显示的矩形。
专用点起始点;
私有矩形区域;
///
///
///
///
///
私有无效imgCamera_MouseDown(对象发送器,MouseButtonEventArgs e)
{
起始点=e.GetPosition(cnvImage);
//移除绘制的矩形网格(如果有)。
//一次只能有一个矩形
如果(rectSelectArea!=null)
cnvImage.Children.Remove(矩形区域);
//初始化矩形。
//设置边框颜色和宽度
rectSelectArea=新矩形
{
笔划=画笔。浅蓝色,
冲程厚度=2
};
SetLeft(rectSelectArea,startPoint.X);
SetTop(rectSelectArea,startPoint.X);
cnvImage.Children.Add(rectSelectArea);
}
///
///
///
///
///
私有无效imgCamera_MouseMove(对象发送方,MouseEventArgs e)
{
if(e.LeftButton==MouseButtonState.Released | | rectSelectArea==null)
返回;
var pos=e.GetPosition(cnvImage);
//设置矩形的位置
var x=数学最小值(位置x,起始点x);
变量y=数学最小值(位置y,起始点y);
//设置矩形的尺寸
var w=数学最大值(位置X,起点X)-X;
var h=数学最大值(位置Y,起始点Y)-Y;
矩形面积。宽度=w;
矩形面积,高度=h;
Canvas.SetLeft(rectSelectArea,x);
Canvas.SetTop(rectSelectArea,y);
}
///
///
///
///
///
私有无效imgCamera_MouseUp(对象发送器,MouseButtonEventArgs e)
{
rectSelectArea=null;
}
我需要知道我需要在viewmodel中编写什么,以及相应地在XAML中需要做哪些更改
提前感谢。请参考下面的链接 访问代码项目
?在中可以找到一种实现大小调整的非常简洁的方法。如果使用此处实现的DesignerItemStyle,可以添加绑定支持,如下所示:
<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的值。谢谢您的回答。但我需要使用MVVM绘制一个矩形。链接提供了简单的WPF解决方案。谢谢Sebastian。让我试试这个,终于成功了。我必须找到一种使用触发器调用视图模型函数的方法。别忘了MVVM意味着分层。绘制矩形的功能对我来说听起来非常独特,因此我在代码中绘制矩形,然后在释放鼠标按钮时将完成的矩形传递给数据层(查看模型<代码>)。