question

VigneshRamesh-3614 avatar image
0 Votes"
VigneshRamesh-3614 asked ·

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

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-wpf
· 1
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

The example in official document which applies the Translation, Scale, and Rotation properties to move, resize, and rotate a Rectangle may give you another way to try.


0 Votes 0 ·

0 Answers