Use a ScrollView

PDF for offline use
Sample Code:
Related Articles:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to load a large image into a scroll view.

Recipe

To display an image inside a scroll view:

  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));
View.AddSubview (scrollView);
  1. Create a UIImageView with the image halloween.jpg. and add it to the Scroll View:
imageView = new UIImageView (UIImage.FromFile ("halloween.jpg"));
scrollView.ContentSize = imageView.Image.Size;
scrollView.AddSubview (imageView);

Only a portion of the image will appear on the iPhone screen, as we set the ContentSize of the Scroll View to the full size of the image, which is large than the size of the display. The user can pan around the image by dragging. By default, the image cannot be zoomed (see the Zoom a Scroll View recipe).

This screenshot shows how the remainder of the image is outside the viewable area on the device.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.