आयत बनाएं जब माउस WPF

Question

में MVVM का उपयोग कर नीचे मेरी XAML है घसीटा। मेरे पास कैनवास के अंदर एक छवि है। जब मैं छवि पर माउस खींचा जाता हूं तो मैं छवि पर आयत खींचना चाहता हूं। मैंने इसे सफलतापूर्वक WPF में किया। लेकिन अब मैं इसे एमवीवीएम में करना चाहता हूं। ईवेंट हैंडलर को कोड में रखने के बजाय मैं उन्हें अपने व्यूमोडेल में रखना चाहता हूं। मैं एमवीवीएम को लागू करने के लिए एमवीवीएम फाउंडेशन का उपयोग कर रहा हूं। नीचे एमवीवीएम फाउंडेशन का एक लिंक है। 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> 

कोड के पीछे

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

कोड में लिखा मैं पता है कि मैं अपने viewmodel में लिख सकते हैं और उसके अनुसार क्या परिवर्तन 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?