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.
<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);
}
}
}
}
--Mrutyunjaya