Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.

id title brief sdk
Implement Tap-to-Zoom
This recipe shows how to load an image into a scroll view and allow the user to double-tap to zoom.


To display an image inside a scroll view and support the double-tap to zoom gesture:

  1. Add the image to your Xamarin.iOS project and ensure the Build Action is set to BundleResource. The example code loads the image “halloween.jpg”

  2. Declare class level fields for a UIScrollView and UIImageVIew

UIScrollView scrollView;
UIImageView imageView;
  1. Create a UIScrollView and it to the View Controller:
scrollView = new UIScrollView (
new CGRect (0, 0, View.Frame.Width
, View.Frame.Height - NavigationController.NavigationBar.Frame.Height));
View.AddSubview (scrollView);
  1. Create a UIImageView and it to the ScrollView:
imageView = new UIImageView (UIImage.FromFile ("halloween.jpg"));
scrollView.ContentSize = imageView.Image.Size;
scrollView.AddSubview (imageView);
  1. Set the zoom properties:
scrollView.MaximumZoomScale = 3f;
scrollView.MinimumZoomScale = .1f;
scrollView.ViewForZoomingInScrollView += (UIScrollView sv) => { return imageView; };
  1. Create a UITapGestureRecognizer and configure it for two taps, then attach it to the Scroll View:
UITapGestureRecognizer doubletap = new UITapGestureRecognizer(OnDoubleTap) {
NumberOfTapsRequired = 2 // double tap
scrollView.AddGestureRecognizer(doubletap); // detect when the scrollView is double-tapped
  1. Implement the handler to change the zoom level when a double-tap is detected on the Scroll View:
private void OnDoubleTap (UIGestureRecognizer gesture) {
			if (scrollView.ZoomScale >= 1)
				scrollView.SetZoomScale(0.25f, true);
				scrollView.SetZoomScale(2f, true);

These screenshots show the image zoomed out and zoomed in: