This tutorial will show you how to add a thumbnail image to each row of the Cities list in the iOS List app we made in the previous two tutorials. This is what the app will look like…

Step 1

To get started, open the Main.storyboard file in the iOS List App solution. Resize the labels on the table row on the main screen and move them to the right side of the table row. Then drag an ImageView element from the toolbox on to the left side of the table row. Change the ImageView element’s name to cityImageView.

Step 2 

Make sure you have added your images to your project (this was explained in the previous tutorial).

Also make sure you have added public string ImagePath; to your code as seen on line 76 of the CitiesViewController.cs file below (this was also explained in the previous tutorial).

For each city in your list, you should also have specified the ImagePath value (location of the image and its filename) in the CitiesViewController.cs file.

Step 3

In the CityTableViewCell.cs file, add the following highlighted line to set the image displayed for each row of the City class. This will get the images to display on each row. Save all of your files.

Step 4

Now just go and test your app. This is what the thumbnail images should look like: