在WPF中使用MVVM拖動鼠標時繪製矩形

Question

以下是我的xaml。我在畫布中有一個圖像。當鼠標拖拽到圖像上時，我想在圖像上繪製矩形。我在WPF中成功完成了它。但是現在我想在MVVM中做到這一點。我不想讓代碼中的事件處理程序在我的ViewModel中。我正在使用MVVM Foundation來實現MVVM。以下是MVVM基金會的鏈接。 http://mvvmfoundation.codeplex.com/

任何幫助，高度讚賞。寫在後面的代碼

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

<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需要什麼樣的變化。

在此先感謝。

Answer 1

實施調整的一個非常簡潔的方式，可以在this article/project找到。如果使用實施那裏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手段得到的值到底層的ViewModels。

Answer 2

就請參考下 訪問代碼項目提供的鏈接！

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