How to use manipulation mode to translate an image without clipping

Question

I'm trying to create a simple application that allows the user to move an image with a TranslateTransform inside an Imagecontrol, using the ManipulationDeltaevent Handler.

However, performs the translate manipulation, the image is clipped in a weird way. In fact, it seems that it is the entire viewport which is translated instead of the image inside the viewport.

I have reproduced this behavior in this very simple application:

The code is straightforward and looks like so:

    <Image
        x:Name="Image"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Stretch="None"
        ManipulationMode="TranslateX, TranslateY"
        ManipulationStarted="Image_ManipulationStarted"
        ManipulationCompleted="Image_ManipulationCompleted"
        ManipulationDelta="Image_ManipulationDelta"
        Source="/Assets/image.png"
        >
        <Image.RenderTransform>
            <TranslateTransform x:Name="Translation" />
        </Image.RenderTransform>
    </Image>

This is the code behind:

    private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        Translation.X += e.Delta.Translation.X;
        Translation.Y += e.Delta.Translation.Y;
    }

This application displays a rectangular 600x600 plain red image. I have resized the application so that the image is way bigger than the available client area. When the user slightly moves the image in the upper left direction, this is what the application looks like:

It seems, as I explained, that the entire viewport has been translated.

If I virtually add where the image should be to the screen shot above, this is what I would have expected:

In the screenshot above, one can see that the image is taller than the application so the entire height of the client area should be covered with a red portion of the image. Likewize, since the image has been moved to the left, only a narrow portion of the right screen should be white.

I hope these screenshots help give sense to my explanations.

Please, is it possible to obtain the desired behaviour when using the ManipulationModes?

Answer 1

Please, is it possible to obtain the desired behaviour when using the ManipulationModes?

I think the answer is no, it's not possible to do this in an UWP app, you will need to create a desktop app to obtain the desired behaviour.

In an UWP app, the Page is in a Frame, then the controls or shapes are in the Page, so basically the controls or shapes are all in a Frame container. What you want to do is actually getting the Rectangle out from its container, in this case we need another container for this Rectangle in an UWP app.

So what I could think about for this is creating a new window to hold this Rectangle. But problems will come with this new window, the app's title is along with a new window unless this window is in the full screen mode. Obviously a full screen mode window will not solve the problem.

This function can be done with Win32 APIs, you may refer to C# Drag-and-Drop: Show the dragged item while dragging, but this APIs are not supported in an UWP app. They are for desktop app only. For example, you may refer to CreateIconIndirect function. Besides, I can't find any supported APIs for UWP app which the same functions have.