在WPF中使用MVVM拖动鼠标时绘制矩形答案

【问题标题】：Draw rectangle when mouse dragged using MVVM in WPF在WPF中使用MVVM拖动鼠标时绘制矩形
【发布时间】：2013-05-08 06:47:15
【问题描述】：

下面是我的 xaml。我在画布内有一个图像。当鼠标在图像上拖动时，我想在图像上绘制矩形。我在 WPF 中成功地做到了。但现在我想在 MVVM 中进行。我不想将事件处理程序放在后面的代码中，而是希望将它们放在我的 ViewModel 中。我正在使用 MVVM Foundation 来实现 MVVM。以下是 MVVM 基金会的链接。 http://mvvmfoundation.codeplex.com/

非常感谢任何帮助。

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>

代码后面写的代码

// 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 中进行哪些更改。

提前致谢。

【问题讨论】：

别忘了 MVVM 意味着分层。绘制矩形的能力对我来说听起来非常特定于 UI，所以我不会有问题在代码隐藏中绘制它，然后在鼠标按钮时将完成的矩形传递给数据层（ViewModel）已发布。

标签： c# .net wpf mvvm mvvm-foundation

【解决方案1】：

在this article / project 中可以找到一种非常巧妙的调整大小的方法。如果您使用在那里实现的 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 方法将值获取到底层 ViewModel。

【讨论】：

谢谢塞巴斯蒂安。让我试试这个。
终于成功了。我必须找到一种使用触发器来调用视图模型函数的方法。

【解决方案2】：

请参考下面给出的链接访问代码项目！

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

【讨论】：

感谢您的回答。但我需要使用 MVVM 绘制一个矩形。这些链接在简单的 WPF 中给出了解决方案。