Zeichne ein Rechteck, wenn die Maus gezogen mit MVVM in WPF

Unten ist mein xaml. Ich habe ein Bild in einem canvas. Ich möchte ein Rechteck zeichnen auf das Bild wenn die Maus gezogen wird, auf dem Bild. Ich habe es erfolgreich in WPF. Aber jetzt möchte ich es in MVVM. Anstatt den event-Handler im code-behind-ich möchte Sie in meinem ViewModel. Ich bin mit MVVM-Foundation für die Implementierung von MVVM. Unten ist ein link zu MVVM-Foundation. http://mvvmfoundation.codeplex.com/

Jede Hilfe wird sehr geschätzt.

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

Muss ich wissen, was muss ich schreiben in meinem viewmodel und dementsprechend, welche Veränderungen erforderlich sind, die in XAML.

Vielen Dank im Voraus.

Vergessen Sie nicht, MVVM bedeutet die Trennung der Schichten. Die Fähigkeit zu zeichnen ein Rechteck klingt ziemlich UI-spezifisch für mich, also ich würde nicht habe ein problem mit der Zeichnung ist es in der code-behind-und dann übergeben die ausgefüllten Rechteck, um die Daten-Schicht (die ViewModel), wenn die Maustaste losgelassen wird.

InformationsquelleAutor Narendra | 2013-05-08

Schreibe einen Kommentar