CODEWITHSUNDEEP
c#xamarin.formscarouselzooming
Ahsanzz1
Ahsanzz1

Reputation: 36

Zoom-able CarouselView in Xamarin.form

I'm using carousel view to display a number of images, changeable upon sliding. The problem I'm having is that these images are not zoom-able. Is there any way to enable zooming within carousel view? Thanks.

Upvotes: 1

Views: 1911

Answers (2)

Savindya A
Savindya A

Reputation: 181

This can be achieved by using

alexrainman/CarouselView for the carousal view. https://github.com/alexrainman/CarouselView

and add Xamarin forms pinch gesture recognizer according to the forms sample to the image used in carousal view

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pinch

Upvotes: 0

Mr Talha
Mr Talha

Reputation: 825

Ok so the First Thing first Carousel View is not a gud thing which you want to make zoom (for Practical Case) and as client demands out of the Galaxy things so you can make things work out with some logic

1st Way:

Create a Class Name ZoomImage in Your Shared Xamarin.forms Solution and Add this code in it 

public class ZoomImage : Image {
  private const double MIN_SCALE = 1;
  private const double MAX_SCALE = 4;
  private const double OVERSHOOT = 0.15;
  private double StartScale;
  private double LastX, LastY;

  public ZoomImage() {
    var pinch = new PinchGestureRecognizer();
    pinch.PinchUpdated += OnPinchUpdated;
    GestureRecognizers.Add(pinch);

    var pan = new PanGestureRecognizer();
    pan.PanUpdated += OnPanUpdated;
    GestureRecognizers.Add(pan);

    var tap = new TapGestureRecognizer { NumberOfTapsRequired = 2 };
    tap.Tapped += OnTapped;
    GestureRecognizers.Add(tap);

    Scale = MIN_SCALE;
    TranslationX = TranslationY = 0;
    AnchorX = AnchorY = 0;
  }

  protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint) {
    Scale = MIN_SCALE;
    TranslationX = TranslationY = 0;
    AnchorX = AnchorY = 0;
    return base.OnMeasure(widthConstraint, heightConstraint);
  }

  private void OnTapped(object sender, EventArgs e) {
    if (Scale > MIN_SCALE) {
      this.ScaleTo(MIN_SCALE, 250, Easing.CubicInOut);
      this.TranslateTo(0, 0, 250, Easing.CubicInOut);
    }
    else {
      AnchorX = AnchorY = 0.5; //TODO tapped position
      this.ScaleTo(MAX_SCALE, 250, Easing.CubicInOut);
    }
  }

  private void OnPanUpdated(object sender, PanUpdatedEventArgs e) {
    if (Scale > MIN_SCALE)
      switch (e.StatusType) {
        case GestureStatus.Started:
          LastX = TranslationX;
          LastY = TranslationY;
          break;
        case GestureStatus.Running:
          TranslationX = Clamp(LastX + e.TotalX * Scale, -Width / 2, Width / 2);
          TranslationY = Clamp(LastY + e.TotalY * Scale, -Height / 2, Height / 2);
          break;
      }
  }

  private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e) {
    switch (e.Status) {
      case GestureStatus.Started:
        StartScale = Scale;
        AnchorX = e.ScaleOrigin.X;
        AnchorY = e.ScaleOrigin.Y;
        break;
      case GestureStatus.Running:
        double current = Scale + (e.Scale - 1) * StartScale;
        Scale = Clamp(current, MIN_SCALE * (1 - OVERSHOOT), MAX_SCALE * (1 + OVERSHOOT));
        break;
      case GestureStatus.Completed:
        if (Scale > MAX_SCALE)
          this.ScaleTo(MAX_SCALE, 250, Easing.SpringOut);
        else if (Scale < MIN_SCALE)
          this.ScaleTo(MIN_SCALE, 250, Easing.SpringOut);
        break;
    }
  }

  private T Clamp<T>(T value, T minimum, T maximum) where T : IComparable {
    if (value.CompareTo(minimum) < 0)
      return minimum;
    else if (value.CompareTo(maximum) > 0)
      return maximum;
    else
      return value;
  }
}

and now In Xaml within carousel view Use Image Like This

<cv:CarouselView x:Name="itemPictureGallery"  Grid.Column="0" Grid.Row="0">
                    <cv:CarouselView.ItemTemplate>

                        <DataTemplate>
                          <local:image source="YOUR_PIC_SOURCE"  />
                         </DataTemplate>

                    </cv:CarouselView.ItemTemplate>
                </cv:CarouselView>

Dont Forget to add nameSpace in Xamal 

xmlns:local="clr-namespace:YOUR_APP_NAME"

so this is how the image can zoom etiher

Or Second Way is

add an Item Tapped on carousel view and pass the picture source in command parameter and open a new page with that picture in it and apply zoom with in it

i use that logic for figure out my problem

Hope this Helps :)

Upvotes: 1

Related Questions