Tag Archives: row

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

Tables

This tutorial explains how to create a table in HTML and populate the table rows and columns with data. Tables can be used to organise and display a range of information but should not be used for creating a web page layout – you should use divs or other tags for web page layouts.

The example table created in the video will look like the one below. We will look at how to apply styles to a table later on but in this tutorial we will focus on creating the headings and adding rows of data.

GamesList

Tables can be used for a range of purposes such as displaying scores for teams on a sports website. They can also be used to display results from a database query. Make sure that when adding a table, you apply some CSS code to give it an effective theme which fits in with the rest of the webpage as the default table style is pretty plain and boring. You might even like to completely remove the border or just use a very light border or background colours on different rows or columns.

The main HTML tags used to create a table are:

  • table – this actually holds the whole table. Your rows and table data should be inside the table tags.
  • caption – this is optional and is used to add a caption to a table
  • th – this creates a heading for a column
  • tr – this creates a row in the table
  • td – this adds a cell of data to a table row

The number of td tags used in a row should generally match the number of headings in the table so that you don’t have any columns out of place.

Watch the video below and then scroll down the page to see the sample code.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Tables</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <caption>Top Selling Games on Steam</caption>
 <tr>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>

There is no CSS code for this tutorial as not styling has been applied yet – this will be in the next tutorial!