Search code examples
c#xamlwindows-phone-8windows-phone-toolkit

How to prevent images to overlapping each other?

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"/>

Solution

  • are you looking for UIElement.ClipToBounds Property?

    enter image description here