Crop Image using Canvas Rectangle

Question

Cropping the image is not working properly. Where I'm wrong?

My Xaml :

<Grid x:Name="Gridimage1">
 <Image Name="image1" Grid.Column="0" Height="317" HorizontalAlignment="Left" Margin="20,67,0,0"  Stretch="Fill" VerticalAlignment="Top" Width="331"></Image>
    <Canvas  x:Name="BackPanel">
      <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
     </Canvas>
</Grid>      
<Button Content="&gt;&gt;" Height="23" HorizontalAlignment="Left" Margin="357,201,0,0" Name="Go" VerticalAlignment="Top" Width="41" Click="Go_Click" FontWeight="Bold" Visibility="Hidden" />
<Image Grid.Column="1" Height="317" HorizontalAlignment="Left" Margin="408,67,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="331" />

C# :

private  bool isDragging = false;
private Point anchorPoint = new Point();
 public MainWindow()
    {
        InitializeComponent();
        Gridimage1.MouseLeftButtonDown += new MouseButtonEventHandler(image1_MouseLeftButtonDown);
         Gridimage1.MouseMove += new MouseEventHandler(image1_MouseMove);
         Gridimage1.MouseLeftButtonUp += new MouseButtonEventHandler(image1_MouseLeftButtonUp);
         Go.IsEnabled = false;
         image2.Source = null;
    }
 private void Go_Click(object sender, RoutedEventArgs e)
    {        
      if (image1.Source != null)
        {
        Rect rect1 = new Rect(Canvas.GetLeft(selectionRectangle), Canvas.GetTop(selectionRectangle), selectionRectangle.Width, selectionRectangle.Height);
                System.Windows.Int32Rect rcFrom = new System.Windows.Int32Rect();
                rcFrom.X = (int)((rect1.X) * (image1.Source.Width) /(image1.Width));
                rcFrom.Y = (int)((rect1.Y) *(image1.Source.Height) / (image1.Height));
                rcFrom.Width = (int)((rect1.Width) * (image1.Source.Width) /(image1.Width));
                rcFrom.Height = (int)((rect1.Height) * (image1.Source.Height) /(image1.Height));  
                BitmapSource bs = new CroppedBitmap(image1.Source as BitmapSource, rcFrom);
                image2.Source = bs;  
            }
        }
#region "Mouse events"
    private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
       if (isDragging == false)
        {
            anchorPoint.X = e.GetPosition(BackPanel).X;
            anchorPoint.Y = e.GetPosition(BackPanel).Y;
            isDragging = true;
        }

    }

    private void image1_MouseMove(object sender, MouseEventArgs e)
    {
        if (isDragging)
        {
            double x = e.GetPosition(BackPanel).X;
            double y = e.GetPosition(BackPanel).Y;
            selectionRectangle.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));
            selectionRectangle.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));
            selectionRectangle.Width = Math.Abs(x - anchorPoint.X);
            selectionRectangle.Height = Math.Abs(y - anchorPoint.Y);

            if (selectionRectangle.Visibility != Visibility.Visible)
                selectionRectangle.Visibility = Visibility.Visible;  
        }
    }

    private void image1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (isDragging)
        {
            isDragging = false;
            if(selectionRectangle.Width >0)
            {
            Go.Visibility = System.Windows.Visibility.Visible;
            Go.IsEnabled = true;
            }
                 if (selectionRectangle.Visibility != Visibility.Visible)
                selectionRectangle.Visibility = Visibility.Visible;
        }
    }

    private void RestRect()
    {
        selectionRectangle.Visibility = Visibility.Collapsed;
        isDragging = false;
    }

#endregion

It is cropping the wrong part.

Answer 1

The Margin property was not set properly to the Canvas control. It should be the same as Image control's margin properly value. If we don't set Margin to Canvas, It will take the full window size.

Xaml

 <Grid x:Name="Gridimage1" Margin="0,0,411,100">
        <Image Name="image1" Grid.Column="0" Height="317" HorizontalAlignment="Left" Margin="20,67,0,0"  Stretch="Fill" VerticalAlignment="Top" Width="331">
        </Image>
            <Canvas x:Name="BackPanel" Margin="20,67,0,0">
                <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF" Visibility="Collapsed" />
            </Canvas>
        </Grid>   

Answer 2

    <Grid x:Name="other">
        <Button Content="&gt;&gt;" Height="23" HorizontalAlignment="Left" Margin="341,152,0,0" Name="Go" VerticalAlignment="Top" Width="41" Click="Go_Click" FontWeight="Bold"  />
        <Image Height="317" HorizontalAlignment="Left" Margin="403,10,-217,-7" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="331" />

    </Grid>
</Grid>