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

Question

以下是我的XAML代码。我在Canvas中放置了一张图片。当鼠标在图片上拖动时，我想在图片上绘制矩形。在WPF中，我已经成功实现了这个功能。但是现在我想使用MVVM来实现它。我想把事件处理程序放在ViewModel中，而不是放在代码后面。我正在使用MVVM Foundation来实现MVVM。以下是MVVM Foundation的链接：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需要做出哪些更改。

提前感谢。

- Narendra

---

不要忘记 MVVM 意味着分层。在我的看法中，绘制矩形的能力听起来非常与 UI 相关，所以我不会在代码后台进行绘制，而是在鼠标按钮释放时将完成的矩形传递到数据层（即 ViewModel）。 - Rachel

Answer 1

非常妙的一种实现缩放的方式可以在这篇文章/项目中找到。如果你使用那里实现的 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。

- Sebastian Edelmeier

---

谢谢Sebastian。让我试一下这个。 - Narendra

最终它成功了。我必须找到一种使用触发器调用视图模型函数的方法。 - Narendra

Answer 2

请参考下面给出的链接 访问Code project！

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

- Rakesh Patil

---

感谢回答。但是我需要用MVVM绘制一个矩形。该链接提供了在简单WPF中的解决方案。 - Narendra