Tag Archives: picture

Adding thumbnail images to list rows in the iOS List App with Xamarin

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…

image1

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.

image2

Step 2 

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

image3

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).

Click image to see larger version.
Click image to see larger version.

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.

Click image to see larger version.
Click image to see larger version.

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.

image6

Step 4

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

preview

How to use an image file as a texture in Maya

This video explains how to use an image file (eg. a JPEG) as a texture for an object in Maya. You can use an image to texture an entire shape or plane, or just selected faces of a shape. Watch the video to find out how. You can also download printed instructions from here.

Note: To apply a texture to just selected faces of a shape rather than the entire shape, right-click the shape and click on Face to enter Face Mode. You should then be able to select individual faces and right-click to assign a material to selected faces. This allows you to use different textures for different sides of a shape.