如何防止图像相互重叠？

Question

我正在 windows phone 中做一个简单的应用程序。有两个透明框架，一个在上面，另一个在 Bootom 上。现在我设置了两个不同的图像，一个在顶部框架中，另一个在第二个框架中。现在我使用捏放大和缩小，但我的图像相互重叠，我想防止它们重叠。我该怎么做请建议？这是我的捏缩放和图像拖动代码

 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;
    }

这是我的 XAML 代码：

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

Answer 1

您在寻找 UIElement.ClipToBounds 属性吗？

如何防止图像相互重叠？

How to prevent images to overlapping each other?

c#

xaml

windows-phone-8

windows-phone-toolkit