Question

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 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;
}

I need to know what do I need to write in my viewmodel and accordingly what changes are required in XAML.

Thanks in advance.

Was it helpful?

Solution

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}">    

That leaves the drag to resize stuff in pure XAML and uses standard WPF means to get the values to the underlying ViewModels.

OTHER TIPS

Just Refer the link given below Visit Code project!

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top