Drag and drop images on canvas

Question

I have drag and drop the images on canvas. I have fix the boundaries so that my images not drag out of canvas,but when I zoom-in and zoom-out the images then its boundaries changes,and it would not drag over whole canvas.I have try this till now.

         public void Btnedit_Click(object sender, RoutedEventArgs e)
         {
        var button = sender as Button;
        button.IsEnabled = false;
        CompositeTransform CT = new CompositeTransform();
        ImgeracOpen.ManipulationMode = ManipulationModes.All;
        //ImgeracOpen.ManipulationDelta += Drag_ManipulationDelta;
        ImgeracOpen.ManipulationDelta += Composite_ManipulationDelta;
        ImgeracOpen.RenderTransform = CT;
    }

   void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        // scale the image

        FrameworkElement Elem = sender as FrameworkElement;
        CompositeTransform CT = Elem.RenderTransform as CompositeTransform;
        if (CT != null)
        {
            CT.ScaleX *= e.Delta.Scale;
            CT.ScaleY *= e.Delta.Scale;
            CT.CenterX = Elem.ActualWidth / 2;
            CT.CenterY = Elem.ActualHeight / 2;
            if (CT.ScaleX < 0.25) CT.ScaleX = 0.25;
            if (CT.ScaleY < 0.25) CT.ScaleY = 0.25;
            if (CT.ScaleX > 1.15) CT.ScaleX = 1.15;
            if (CT.ScaleY > 1.15) CT.ScaleY = 1.15;

        }

        double Left = Canvas.GetLeft(Elem);
        double Top = Canvas.GetTop(Elem);
        Left += e.Delta.Translation.X;//Get x cordinate 
        Top += e.Delta.Translation.Y;//Get y cordinate 
        //check for bounds 
        if (Left < 0)
        {
            Left = 0;
        }
        else if (Left > (my_canvas.ActualWidth - Elem.ActualWidth))
        {
            Left = my_canvas.ActualWidth - Elem.ActualWidth;
        }

        if (Top < 0)
        {
            Top = 0;
        }
        else if (Top > (my_canvas.ActualHeight - Elem.ActualHeight))
        {
            Top = my_canvas.ActualHeight - Elem.ActualHeight;
        }

        Canvas.SetLeft(Elem, Left);
        Canvas.SetTop(Elem, Top);

thanks in advance

Answer 1

when I zoom-in and zoom-out the images then its boundaries changes,and it would not drag over whole canvas.

It's because when you scale the Image, the Image's ActualWidth and ActualHeight won't change and so is Left and Top that you get from Canvas.GetLeft and Canvas.GetTop .

To fix the problem, you need to calucate the Left and Top values when the image scales like below:

As you can see in the picture. When image scales, the Left Value should be Canvas.Width - Image.ActualWidth - xOffset when image hit the right boundary. And when it hit the left boundary Left should be equal to xOffset .

Through this logic, the codes in Composite_ManipulationDelta should be modified like below:

void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // scale the image
    FrameworkElement Elem = sender as FrameworkElement;
    CompositeTransform CT = Elem.RenderTransform as CompositeTransform;
    if (CT != null)
    {
        CT.ScaleX *= e.Delta.Scale;
        CT.ScaleY *= e.Delta.Scale;
        CT.CenterX = Elem.ActualWidth / 2;
        CT.CenterY = Elem.ActualHeight / 2;
        //if (CT.ScaleX < 0.25) CT.ScaleX = 0.25;
        //if (CT.ScaleY < 0.25) CT.ScaleY = 0.25;
        //if (CT.ScaleX > 1.15) CT.ScaleX = 1.15;
        //if (CT.ScaleY > 1.15) CT.ScaleY = 1.15;
    }
    double Left = Canvas.GetLeft(Elem);
    double Top = Canvas.GetTop(Elem);

    //output.Text = "Left:=" + Left + "  Top:=" + Top+"\nActualWidth:="+Elem.Width+"  ActualHeight"+Elem.Height;
    Left += e.Delta.Translation.X;//Get x cordinate 
    Top += e.Delta.Translation.Y;//Get y cordinate 
                                     //check for bounds
    double xOffset = Elem.ActualWidth * (CT.ScaleX-1) / 2;
    double yOffset = Elem.ActualHeight * (CT.ScaleY-1) / 2; 
    if (Left-xOffset < 0)
    {
        Left = xOffset;
    }
    else if (Left > (my_canvas.ActualWidth - Elem.ActualWidth-xOffset))
    {
        Left = my_canvas.ActualWidth - Elem.ActualWidth-xOffset;
    }

    if (Top -yOffset<0 )
    {
        Top = yOffset;
    }
    else if (Top > (my_canvas.ActualHeight - Elem.ActualHeight-yOffset))
    {
        Top = my_canvas.ActualHeight - Elem.ActualHeight-yOffset;
    }

    Canvas.SetLeft(Elem, Left);
    Canvas.SetTop(Elem, Top);
}