[WPF] Image get disappeared while zooming out image using DeltaManipulation event (pinching)

Vignesh Ramesh 1 Reputation point
2020-06-02T06:50:11.17+00:00

Hi All,

My requirement is to do pinch zooming in WPF platform. For that, i have created simple POC sample according to my requirement and it can be reproduced. Please find the snippets below

XAML:

<Grid>
    <Image x:Name="JPGImage"
           Source="TestImage.jpg"
           IsManipulationEnabled="True" 
           ManipulationDelta="Image_ManipulationDelta"
           ManipulationStarted="JPGImage_ManipulationStarted"
           ManipulationCompleted="JPGImage_ManipulationCompleted"/>
</Grid>

C#:

private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    System.Diagnostics.Debug.WriteLine(e.DeltaManipulation.Translation.X + " " + e.DeltaManipulation.Translation.Y);
    if (e.Manipulators.Count() > 1)
    {
        if (scale.ScaleX > 1.6 || scale.ScaleX < 0.5)
        {
            scale.ScaleX = 1;
            scale.ScaleY = 1;
            translation.X = 0;
            translation.Y = 0;
            this.JPGImage.RenderTransform = transformGroup;
        }
        else
        {
            if (isScale)
            {
                scale.ScaleX = previousCumlativeScale * e.DeltaManipulation.Scale.X;
                scale.ScaleY = previousCumlativeScale * e.DeltaManipulation.Scale.Y;
                var x = (e.ManipulationOrigin.X - previousXPosition) * (scale.ScaleX - 1);
                var y = (e.ManipulationOrigin.Y - previousYPosition) * (scale.ScaleY - 1);
                translation.X += x;
                translation.Y += y;
            }
            else
            {
                scale.ScaleX *= e.DeltaManipulation.Scale.X;
                scale.ScaleY *= e.DeltaManipulation.Scale.Y;
                translation.X += e.DeltaManipulation.Translation.X;
                translation.Y += e.DeltaManipulation.Translation.Y;
            }

            scale.CenterX = e.ManipulationOrigin.X;
            scale.CenterY = e.ManipulationOrigin.Y;
            this.JPGImage.RenderTransform = transformGroup;
        }

        previousCumlativeScale = scale.ScaleX;
        previousTranslateX = translation.X;
        previousTranslateY = translation.Y;
        previousXPosition = scale.CenterX;
        previousYPosition = scale.CenterY;
    }
    else
    {
        translation.X += e.DeltaManipulation.Translation.X;
        translation.Y += e.DeltaManipulation.Translation.Y;
    }
}

My problems are

  1. If i try to Zoomout the image using pinch, then it get disappeared when its scale value becomes less than 1
  2. Zooming is also not smooth
  3. Also i have reset the zoom after certain level of scale (mentioned below) then the image is not get reset properly.

C#

         if (scale.ScaleX > 1.6 || scale.ScaleX < 0.5)
         {
            scale.ScaleX = 1;
            scale.ScaleY = 1;
            translation.X = 0;
            translation.Y = 0;
            this.JPGImage.RenderTransform = transformGroup;
         }

Please get the sample from the below link
WPFZooming

I have found the below issue only related to manipulation events in github
https://github.com/Microsoft/dotnet/issues/575

Could you please help me to resolve the problems?.

Thanks in advance

Vignesh.

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,687 questions
{count} votes