Нарисуйте прямоугольник при перетаскивании мыши с помощью MVVM в WPF
Ниже приведен мой xaml. У меня есть изображение внутри холста. Я хочу нарисовать прямоугольник на изображении, когда мышь перетаскивается на изображение. Я сделал это успешно в WPF. Но теперь я хочу сделать это в MVVM. Вместо того, чтобы иметь обработчики событий в коде, я хочу иметь их в моей ViewModel. Я использую MVVM Foundation для реализации MVVM. Ниже приведена ссылка на 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>
код, написанный в коде
// 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.
спасибо заранее.
2 ответов
очень аккуратный способ реализации изменения размера можно найти в в этой статье / проект. Если вы используете реализованный там 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.
просто обратитесь по ссылке, приведенной ниже Посетите проект Кодекса!
http://www.codeproject.com/Articles/148503/Simple-Drag-Selection-in-WPF?