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/

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 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 na
Edit
Report