How to prevent images to overlapping each other?

Question

I am doing a simple application in windows phone. Having two transparent frames, One on top and other on Bootom. Now i set two different images one in the Top frames and other in second one. Now i use Pinch Zoom in and Zoom out but my images overlap each other i want to prevent them from overlapping. How can i Do that Please Suggest? Here is My Pinch Zoom and Image drag Code

 private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        if (InitialScale * e.DistanceRatio > 2 || (InitialScale != 1 && e.DistanceRatio == 1) || InitialScale * e.DistanceRatio < 1)
            return;
        if (e.DistanceRatio < 0.05)
        {
            ImageTransformation.CenterX = 0;
            ImageTransformation.CenterY = 0;
            ImageTransformation.TranslateX = 0;
            ImageTransformation.TranslateY = 0;
        }
        ImageTransformation.CenterX = Center.X;
        ImageTransformation.CenterY = Center.Y;

        if (this.Orientation == PageOrientation.Landscape)
        {
            ImageTransformation.ScaleX = InitialScale * (1 + (e.DistanceRatio - 1) * 1);
        }
        else
        {
            ImageTransformation.ScaleX = InitialScale * e.DistanceRatio;
        }
        ImageTransformation.ScaleY = ImageTransformation.ScaleX;
        ImageTransformation.Rotation = Angle + e.TotalAngleDelta;



    }

    private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
    {
        InitialScale = ImageTransformation.ScaleX;

        Angle = ImageTransformation.Rotation; //to rotate image

        // Calculate the center for the zooming
        Point firstTouch = e.GetPosition(Myimage, 0);
        Point secondTouch = e.GetPosition(Myimage, 1);

        Center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0, firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0);
    }

    private void Image_DragDelta(object sender, DragDeltaGestureEventArgs e)
    {
        double centerX = ImageTransformation.CenterX;
        double centerY = ImageTransformation.CenterY;
        double translateX = ImageTransformation.TranslateX;
        double translateY = ImageTransformation.TranslateY;
        double scale = ImageTransformation.ScaleX;
        double width = Myimage.ActualWidth;
        double height = Myimage.ActualHeight;

        // Verify limits to not allow the image to get out of area

        if (centerX - scale * centerX + translateX + e.HorizontalChange < 120 && centerX + scale * (width - centerX) + translateX + e.HorizontalChange > 120)
        {
            ImageTransformation.TranslateX += e.HorizontalChange;
        }

        if (centerY - scale * centerY + translateY + e.VerticalChange < 120 && centerY + scale * (height - centerY) + translateY + e.VerticalChange > 120)
        {
            ImageTransformation.TranslateY += e.VerticalChange;
        }
        return;
    }

And This is my XAML code:

     <Grid x:Name="LayoutRoot" ManipulationDelta="OnManipulationDelta" Height="728" VerticalAlignment="Top">
    <Image x:Name="MyImage" HorizontalAlignment="Left" Height="814" VerticalAlignment="Top" Width="495"  Stretch="Fill"   />
    <Canvas x:Name="PenguinCanvas"
        RenderTransformOrigin="0.3,0.3" ManipulationDelta="PenguinCanvas_ManipulationDelta">
        <Canvas.RenderTransform>
            <ScaleTransform x:Name="PenguinTransform" />
        </Canvas.RenderTransform>
     <Image x:Name="Myimage" RenderTransformOrigin="0,0" Height="246" Width="342" HorizontalAlignment="Left" Stretch="Fill" Canvas.Top="-72" Canvas.Left="83" >
            <Image.RenderTransform>
                <CompositeTransform x:Name="ImageTransformation" ScaleX="1" ScaleY="1" />
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener PinchStarted="GestureListener_PinchStarted" PinchDelta="OnPinchDelta" DragDelta="Image_DragDelta" />
            </toolkit:GestureService.GestureListener>
        </Image>
        <Image x:Name="Myimage1" RenderTransformOrigin="0,0" Height="259" Width="322" ManipulationDelta="MainPage_ManipulationDelta1" HorizontalAlignment="Left" Stretch="Fill" Canvas.Left="83" Canvas.Top="307"  >
            <Image.RenderTransform>
                <CompositeTransform x:Name="ImageTransformation1" ScaleX="1" ScaleY="1" />
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener PinchStarted="GestureListener_PinchStarted1" PinchDelta="OnPinchDelta1" DragDelta="Image_DragDelta1" />
            </toolkit:GestureService.GestureListener>
        </Image>
    </Canvas>
    <Image x:Name="img" Source="/Assets/new collage/c10.png"  Stretch="Fill"/>
    <Image x:Name="img1" Source="/Assets/new collage/c10.png"  Stretch="Fill"/>

I suggest you to take Grids instead of Frames. if you want to drag images but not overlap on each other, then you should put both of those two images in different Grids and those frames should have dedicated heights like in fixed number or in form of `*`. For more help you've to give exact scenario or your problem with more code, specially `XAML code` — Keval Langalia, Apr 21 '15 at 09:00
Thankx Mr.Kevel :) i also tried grid on place of frames but still images are overlapping when image get zoom in. — Ritu Tyagi, Apr 21 '15 at 09:42

score 1 · Accepted Answer · answered Apr 21 '15 at 11:20

1

are you looking for UIElement.ClipToBounds Property?

enter image description here

answered Apr 21 '15 at 11:20

Mujahid Daud Khan

1,983
1
14
23

Thankx @Mujahid yeahh same exactly i want this :) How can i use that for different images on the same page – Ritu Tyagi Apr 21 '15 at 11:25
place images inside of grid, set the Property to true and fix the length/width of the grid i.e `Height="259"` – Mujahid Daud Khan Apr 21 '15 at 11:32
Okayyy Thanku So Much :) I got my Solution – Ritu Tyagi Apr 21 '15 at 11:34

How to prevent images to overlapping each other?

1 Answers1