Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to implement image zoom in and out?

stesvisstesvis USMember ✭✭✭✭

I followed this example (pinch gesture recognizer), and I came across 2 issues.
https://developer.xamarin.com/guides/xamarin-forms/user-interface/gestures/pinch/

1) the zoom in and out doesn't seem to work that great
2) after I zoom in, there's no way to scroll the image when it goes off the screen.

I tried adding a scroll view and a few other options, but I can't get it to work.
Any better solution?

In iOS, I used to open the image in a web view (I have the image Uri, it's not local) and I was able to zoom in & out perfectly.
How can I do the same in Xamarin Forms?

Posts

  • CCLIUCCLIU USMember ✭✭

    I have implemented the following sample. You could try it, too.

    https://github.com/davidezordan/multi-touch

  • stesvisstesvis USMember ✭✭✭✭

    Thanks @CCLIU, where exactly should I be looking for Image zoom in and out?

  • CCLIUCCLIU USMember ✭✭

    Basically, there are two steps
    1. Add "MultiTouchBehavior" class in your PCL project
    2. adjust your XAML page like this

    Hope it help.

  • DanielIonescuDanielIonescu USMember ✭✭
    edited April 2018

    @CCLIU said:
    Basically, there are two steps
    1. Add "MultiTouchBehavior" class in your PCL project
    2. adjust your XAML page like this

    Hope it help.

    Can you please mark the last solution as accepted answer? Please also note for the ones that will use this, that you'll also require DoubleExtensions file from the solution in the git provided.

    If you also require double tap to return to initial value, I found this solution for OnTapped with the code provided:

    private void OnTapped(object sender, EventArgs e) { _parent.Content.Scale = _currentScale = _startScale = 1; _parent.Content.TranslationX = _parent.Content.TranslationY = 0; _parent.Content.AnchorX = 0; _parent.Content.AnchorY = 0; }

    Also do not forget to subscribe/remove the OnTapped event like the other gestures in the file provided, with one mention. When you edit InitialiseRecognizers, try to put
    _tapGestureRecognizer = new TapGestureRecognizer() { NumberOfTapsRequired = 2 };
    so that the normal user has to double tap the content before it returns to default

  • stesvisstesvis USMember ✭✭✭✭
    @DanielIonescu i can only like it unfortunately..
  • ReihanehKhaksaranReihanehKhaksaran USMember ✭✭

    @stesvis I'm having the same issue, have you found any solutions yet?

Sign In or Register to comment.