Cropping when moving and resizing a cropping rectangle

Question

I created a program that crops an image and displays the cropped image but I'm trying to add more functionality
by making it movable and resizable. The rectangle moves and resizes but it only crops an image when user draws the rectangle and not when moved or resized. I know that the X,Y, height and width position of the rectangle would need to be updated but I'm not
sure how I can accomplish this being new to WPF. Below is my user control "CropControl and the code behind. Also, I'm implementing my code using MVVM framework.
XAML: 
<UserControl x:Class="Klein_Tools_Profile_Pic_Generator.CropControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:s="clr-namespace:Klein_Tools_Profile_Pic_Generator"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeNS" Margin="0 -4 0 0"
VerticalAlignment="Top"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeWE" Margin="-4 0 0 0"
VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeWE" Margin="0 0 -4 0"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeNS" Margin="0 0 0 -4"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW"
VerticalAlignment="Top" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW"
VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Canvas x:Name="BackPanel"
MouseLeftButtonDown="LoadedImage_MouseLeftButtonDown"
MouseMove="LoadedImage_MouseMove"
MouseLeftButtonUp="LoadedImage_MouseLeftButtonUp"
Background="Transparent">
<ContentControl x:Name="contControl" Visibility="Collapsed"
Template="{StaticResource DesignerItemTemplate}">
<Rectangle x:Name="selectionRectangle" Fill="#220000FF"
IsHitTestVisible="False"/>
</ContentControl>
</Canvas>
</UserControl>
CODE BEHIND:
namespace Klein_Tools_Profile_Pic_Generator
/// <summary>
/// Interaction logic for CropControl.xaml
/// </summary>
public partial class CropControl : UserControl
private bool isDragging = false;
private Point anchorPoint = new Point();
private bool moveRect;
TranslateTransform trans = null;
Point originalMousePosition;
public CropControl()
InitializeComponent();
//Register the Dependency Property
public static readonly DependencyProperty SelectionProperty =
DependencyProperty.Register("Selection", typeof(Rect), typeof(CropControl), new PropertyMetadata(default(Rect)));
public Rect Selection
get { return (Rect)GetValue(SelectionProperty); }
set { SetValue(SelectionProperty, value); }
// this is used, to react on changes from ViewModel. If you assign a
// new Rect in your ViewModel you will have to redraw your Rect here
private static void OnSelectionChanged(System.Windows.DependencyObject d, System.Windows.DependencyPropertyChangedEventArgs e)
Rect newRect = (Rect)e.NewValue;
Rectangle selectionRectangle = d as Rectangle;
if (selectionRectangle != null)
return;
selectionRectangle.SetValue(Canvas.LeftProperty, newRect.X);
selectionRectangle.SetValue(Canvas.TopProperty, newRect.Y);
selectionRectangle.Width = newRect.Width;
selectionRectangle.Height = newRect.Height;
private void LoadedImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
if (isDragging == false)
anchorPoint.X = e.GetPosition(BackPanel).X;
anchorPoint.Y = e.GetPosition(BackPanel).Y;
Canvas.SetZIndex(selectionRectangle, 999);
isDragging = true;
BackPanel.Cursor = Cursors.Cross;
private void LoadedImage_MouseMove(object sender, MouseEventArgs e)
if (isDragging)
double x = e.GetPosition(BackPanel).X;
double y = e.GetPosition(BackPanel).Y;
contControl.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));
contControl.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));
contControl.Width = Math.Abs(x - anchorPoint.X);
contControl.Height = Math.Abs(y - anchorPoint.Y);
if (contControl.Visibility != Visibility.Visible)
contControl.Visibility = Visibility.Visible;
private void Image_MouseMove(object sender, MouseEventArgs e)
if (moveRect)
trans = selectionRectangle.RenderTransform as TranslateTransform;
if (trans == null)
selectionRectangle.RenderTransformOrigin = new Point(0, 0);
trans = new TranslateTransform();
selectionRectangle.RenderTransform = trans;
trans.Y = -(originalMousePosition.Y - e.GetPosition(BackPanel).Y);
trans.X = -(originalMousePosition.X - e.GetPosition(BackPanel).X);
e.Handled = false;
private void LoadedImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
if (isDragging)
isDragging = false;
if (contControl.Width > 0)
//Crop.IsEnabled = true;
//Cut.IsEnabled = true;
BackPanel.Cursor = Cursors.Arrow;
contControl.GetValue(Canvas.LeftProperty);
// Set the Selection to the new rect, when the mouse button has been released
Selection = new Rect(
(double)contControl.GetValue(Canvas.LeftProperty),
(double)contControl.GetValue(Canvas.TopProperty),
contControl.Width,
contControl.Height);

Answer 1

Hello HotSawz,
The ResizeThumb and MoveThumb is not in your code so I cannot compile. Anyway, it is not the problem.
Anyway, can you clarify more details about "it only crops an image when user draws the rectangle and not when moved or resized", it is already normal behavoir for you to draw a rectangle and then move it. What kind of action do you want? Do you
mean some controls like this:
http://www.codeproject.com/Articles/23158/A-Photoshop-like-Cropping-Adorner-for-WPF
Best regards,
Barry
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.