Adding the iOS photo screen

Now that we have our list page, we want to add another UIViewController for displaying selected photos. Let's add a new UIViewController and call it PhotoController. In PhotoController, we are going to build a screen that simply displays the same content in the PhotoCell, but a bit larger.

First, let's add the navigation flow from MainController to PhotoController. We are going to be pushing a new PhotoController whenever a row is selected. Open up TableSource.cs and add the following; at the top, we need to add an EventHandler:

public event EventHandler<GalleryItem> 
 ItemSelected; 

Whenever the row is selected we want to fire this event:

public override void RowSelected (UITableView tableView, NSIndexPath indexPath) 
        { 
            if (ItemSelected != null) 
            { 
                ItemSelected (this, galleryItems[indexPath.Row]); 
            } 
 
            tableView.DeselectRow (indexPath, true); 
        } 

Whenever the row is selected, we want to fire this event and pass the gallery item for the index path row. Now we need to handle this event in the MainController class to push a new PhotoController on the navigation stack, but before we do this we need to implement PhotoController:

public partial class PhotoController : UIViewController 
    { 
        /// <summary> 
        /// The image view. 
        /// </summary> 
        private UIImageView _imageView; 
 
        /// <summary> 
        /// The title label. 
        /// </summary> 
        private UILabel _titleLabel; 
 
        /// <summary> 
        /// The date label. 
        /// </summary> 
        private UILabel _dateLabel; 
 
        /// <summary> 
        /// Initializes a new instance of the <see cref="Gallery.iOS.PhotoController"/> class. 
        /// </summary> 
        public PhotoController (ALAsset asset) : base ("PhotoController", null) 
        { 
            _imageView = new UIImageView() 
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
                ContentMode = UIViewContentMode.ScaleAspectFit 
            }; 
 
            _titleLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _dateLabel = new UILabel ()  
            { 
                TranslatesAutoresizingMaskIntoConstraints = false, 
            }; 
 
            _imageView.Image = new UIImage(asset.DefaultRepresentation.GetFullScreenImage ()); 
            _titleLabel.Text = asset.DefaultRepresentation.Filename; 
            _dateLabel.Text = asset.Date.ToString(); 
        } 

This is very similar to our GalleryCell presentation, but this controller will stack the elements vertically and force the image to scale to fit, keeping the image's correct ratio to avoid any warping. Now let's add ViewDidLoad to lay out the views:

public override void ViewDidLoad () 
        { 
            base.ViewDidLoad (); 
 
            View.Add (_imageView); 
            View.Add (_titleLabel); 
            View.Add (_dateLabel); 
 
            // set layout constraints for main view 
            View.AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[imageView]-10-[titleLabel(50)]-10-[dateLabel(50)]|", NSLayoutFormatOptions.DirectionLeftToRight, null, new NSDictionary("imageView", imageView, "titleLabel", titleLabel, "dateLabel", dateLabel))); 
 
            View.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|[imageView]|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("imageView", imageView))); 
            View.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|[titleLabel]|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("titleLabel", titleLabel))); 
            View.AddConstraints (NSLayoutConstraint.FromVisualFormat("H:|[dateLabel]|", NSLayoutFormatOptions.AlignAllTop, null, new NSDictionary ("dateLabel", dateLabel))); 
        } 

There's nothing new here; we are simply adding the three elements and setting our layout constraints accordingly. We stretch all elements to the entire width of the view and stack elements down the pages with the image view on top and a dynamic size based upon the aspect size of the image.

Finally, the last step is to add the event handler whenever a row is selected. We use ImageHandler to fetch ALAsset by the title (filename) in the gallery item, then pass this into the constructor of a new PhotoController and update the constructor of MainController:

        public MainController () : base ("MainController", null) 
        { 
            _source = new TableSource (); 
 
            _source.ItemSelected += (sender, e) =>  
            { 
                var asset = _imageHandler.SynchronousGetAsset (e.Title); 
                NavigationController.PushViewController (new PhotoController (asset), true); 
            }; 
 
            _imageHandler = new ImageHandler (); 
            _imageHandler.AssetsLoaded += handleAssetsLoaded; 
        } 

Excellent! Now run the application and try selecting a few items in the list; you will be navigated to a new PhotoController which will display the selected ALAsset image with its filename and date information.