id | title | brief | sdk | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
8C76A43F-B864-4315-9D27-10B13D110FAC |
Zoom a ScrollView |
This recipe shows how to load a large image into a scroll view and allow the user to pinch-zoom. |
|
To display an image inside a scroll view and support the pinch-to-zoom gesture:
-
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”
-
Declare class level fields for a
UIScrollView
andUIImageVIew
UIScrollView scrollView;
UIImageView imageView;
- Create a
UIScrollView
and add 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);
- Create a
UIImageView
and add it to the Scroll View:
imageView = new UIImageView (UIImage.FromFile ("halloween.jpg"));
scrollView.ContentSize = imageView.Image.Size;
scrollView.AddSubview (imageView);
- Set the zoom properties:
scrollView.MaximumZoomScale = 3f;
scrollView.MinimumZoomScale = .1f;
scrollView.ViewForZoomingInScrollView += (UIScrollView sv) => { return imageView; };
Only a portion of the image will appear on the iPhone screen. The user can pan around the image by dragging or zoom with the pinch gesture.
To test the pinch gesture in the simulator, hold down the option key while dragging – two grey circles will be displayed to illustrate the simulated pinch gesture: