Android
iOS
 

Use a ScrollView

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 Content. The example code loads the image “halloween.jpg”

2. Declare class level fields for a UIScrollView and UIImageVIew

UIScrollView scrollView;
UIImageView imageView;

3. Create a UIScrollView and it to the View Controller:

scrollView = new UIScrollView (
new RectangleF (0, 0, View.Frame.Width
, View.Frame.Height - NavigationController.NavigationBar.Frame.Height));
View.AddSubview (scrollView);

4. Create a UIImageView and 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. 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.