WPVMでMVVMを使用してマウスをドラッグしたときの矩形描画

Question

以下は私のxamlです。私はキャンバスの中にイメージを持っています。マウスを画像上にドラッグすると、画像に矩形を描きたい。私はWPFでうまくやった。しかし、今私はMVVMでそれをやりたいイベントハンドラをコードの背後に置く代わりに、それらを私のViewModelに入れたいと思っています。 MVVMを実装するためにMVVM Foundationを使用しています。以下は、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> 

私はXAMLで必要とされているどのような変化に応じて、私のviewmodelに書く必要があると何をすべきかを知る必要があり

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

の背後にあるコードで書かれたコード。

ありがとうございます。

Answer 1

サイズ変更を実装する非常にきれいな方法は、this article/projectにあります。あなたがそこに実装さDesignerItemStyleを使用する場合は、そのように結合のサポートを追加することができます：純粋なXAMLでのもののサイズを変更するためにドラッグを残し、WPFは、基礎となるのviewmodelsに値を取得することを意味し、標準的な使用

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

を。

Answer 2

次のリンクを参照してください。 Visit Code project！

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