Table View in Xamarin iOS - Part 2
Tags: ios, tableviewcell, tableviewinxamari, tableview
Published: 2019-12-22 15:26:26

---
title: Table View in Xamarin iOS - Part 2
published: true
date: 2019-12-15 06:58:00 UTC
tags: iOS,Table View Cell,Table View in Xamari,TableView
canonical_url: https://logeshpalani.blogspot.com/2019/12/table-view-in-xamarin-ios-part-2.html
---

## 

[![](https://1.bp.blogspot.com/-8gEigdZLmho/XfXcm5iweYI/AAAAAAAAPek/NXHebK4c1e0Co-o3xp3BvBjSyKzp4-QdQCEwYBhgL/s1600/Vintage%2BTropics%2BEtsy%2BBanner.png)](https://1.bp.blogspot.com/-8gEigdZLmho/XfXcm5iweYI/AAAAAAAAPek/NXHebK4c1e0Co-o3xp3BvBjSyKzp4-QdQCEwYBhgL/s1600/Vintage%2BTropics%2BEtsy%2BBanner.png)
  
  
Introduction 

In this article, we are going take a look into different UITableViewCell built-in styles in given Xamarin.iOS. Before getting started with this post, you should follow the [Part 1](https://dev.to/logeshpalani98/simple-table-view-in-xamarin-ios-3ljg-temp-slug-2500470)article instructions completely. 

Step 1:   
  

Let's modify the UITableViewCell  and their properties in GetCell Implementation   
  
 within UITableViewSource class. Here are the properties of building styles.  
  

Subject – Title label string. 

Body – Detailed title label string. 

Image – Set Image 

Depending upon your cell selection, you have to fill in different subviews values. 

  

  

[![](https://1.bp.blogspot.com/-ZZewnVw4Qjk/XfXRLHfQ94I/AAAAAAAAPeE/UFlQVVQe8SAlUaUWTv7-2n2Wv9aiWl8ogCLcBGAsYHQ/s400/1.png)](https://1.bp.blogspot.com/-ZZewnVw4Qjk/XfXRLHfQ94I/AAAAAAAAPeE/UFlQVVQe8SAlUaUWTv7-2n2Wv9aiWl8ogCLcBGAsYHQ/s1600/1.png)
  
  

Step 2: 

Add profile image file in Assets . To Perform that, open Solution Explorer >> Resources >> Assets >> then, right click to add Image Set >> give the Image Set name, and drag and drop the images. 

  

[![](https://1.bp.blogspot.com/-GY7YYbBZUxU/XfXRLQXtBlI/AAAAAAAAPec/TvHRXAt_MXofipiSYqhCJuTNw0pYnu2EACEwYBhgL/s400/2.png)](https://1.bp.blogspot.com/-GY7YYbBZUxU/XfXRLQXtBlI/AAAAAAAAPec/TvHRXAt_MXofipiSYqhCJuTNw0pYnu2EACEwYBhgL/s1600/2.png)
  
  

Step 3: 

  

- Open TableViewSource class and go to GetCell method. All the changes will be made only in GetCell method. 
  

  

Sample A: Default Style   
  

change the constructor of UITableViewCell is UITableViewCellStyle.Default. Both  
  
 UITableViewCellStyle.Default, string are the parameters. Here, we can set cell   
  
 type as default and string as null. Let's bind the data their properties base on index   
  
 and your code will look as shown below. 

  
  

<!-- HTML generated using hilite.me -->

| 
```
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
```
 | 
```
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewSample
{
internal class SampleTableViewSource : UITableViewSource
    {
private IList<ContactModel> data;
public SampleTableViewSource(List<ContactModel> data)
        {
this.data = data;
        }

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
var cell = new UITableViewCell(UITableViewCellStyle.Default, null);
var dataSet = data[indexPath.Row];

if (dataSet != null)
            {
                cell.TextLabel.Text = dataSet.Name;
                cell.ImageView.Image = UIImage.FromBundle("Phineas\_Flynn");
            }

return cell;
        }

public override nint RowsInSection(UITableView tableview, nint section)
        {
return data.Count;
        }
    }
}

```
 |

  

  

Run the application, your output like below.   
  

[![](https://1.bp.blogspot.com/-pvQSUf1L7-w/XfXRLCDxgqI/AAAAAAAAPeU/GuUmOtuobU4Oxu545onYOPw9rCSnPIL0ACEwYBhgL/s400/3.png)](https://1.bp.blogspot.com/-pvQSUf1L7-w/XfXRLCDxgqI/AAAAAAAAPeU/GuUmOtuobU4Oxu545onYOPw9rCSnPIL0ACEwYBhgL/s1600/3.png)
  

  

Sample B: Subtitle Style 

Next, try with Subtitle style. Just change a piece of code.  

Change cell style type Default into Subtitle, add one more property as Detail and bind the Detail string with this. The code will be shown as given below.   
  

| 
```
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
```
 | 
```
using System;
using System.Collections.Generic;
using CoreGraphics;
using Foundation;
using UIKit;

namespace TableViewSample
{
internal class SampleTableViewSource : UITableViewSource
    {
private IList<ContactModel> data;
public SampleTableViewSource(List<ContactModel> data)
        {
this.data = data;
        }

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
var cell = new UITableViewCell(UITableViewCellStyle.Default, null);
var dataSet = data[indexPath.Row];

if (dataSet != null)
            {
                cell.TextLabel.Text = dataSet.Name;
                cell.ImageView.Image = UIImage.FromBundle("Phineas\_Flynn");
                cell.DetailTextLabel.Text = dataSet.MobileNumber;
            }

return cell;
        }

public override nint RowsInSection(UITableView tableview, nint section)
        {
return data.Count;
        }
    }
}

```
 |

  

Run the app to see the output. 

  

[![](https://1.bp.blogspot.com/-UDewpIbGMFE/XfXRMRTTKWI/AAAAAAAAPec/GfM2gm6qqJwp5WjbHEG5CzT4H1Jq_K4JgCEwYBhgL/s400/4.png)](https://1.bp.blogspot.com/-UDewpIbGMFE/XfXRMRTTKWI/AAAAAAAAPec/GfM2gm6qqJwp5WjbHEG5CzT4H1Jq_K4JgCEwYBhgL/s1600/4.png)
  
  
Sample C: Value Style  

  

Finally, look into Value style type as well as change the cell type and properties. 

  

Change the type Subtitle into Default: here we have only two label properties. This class code will be as shown below.   
  

<contactmodel><contactmodel><br><!-- HTML generated using hilite.me --><div style="background: #ffffff; background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid dodgerblue; overflow: auto; overflow: auto; padding: 0.2em 0.6em; width: auto; width: auto;"><table><tbody><tr>
<td><pre style="line-height: 125%; margin: 0;">1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37</pre></td>
<td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System</span>;<br><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">System.Collections.Generic</span>;<br><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">CoreGraphics</span>;<br><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">Foundation</span>;<br><span style="color: #008800; font-weight: bold;">using</span> <span style="color: #0e84b5; font-weight: bold;">UIKit</span>;<br><br><span style="color: #008800; font-weight: bold;">namespace</span> <span style="color: #0e84b5; font-weight: bold;">TableViewSample</span><br>{<br> <span style="color: #008800; font-weight: bold;">internal</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">SampleTableViewSource</span> : UITableViewSource<br> {<br> <span style="color: #008800; font-weight: bold;">private</span> IList&lt;ContactModel&gt; data;<br> <span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">SampleTableViewSource</span>(List&lt;ContactModel&gt; data)<br> {<br> <span style="color: #008800; font-weight: bold;">this</span>.data = data;<br> }<br><br> <span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> UITableViewCell <span style="color: #0066bb; font-weight: bold;">GetCell</span>(UITableView tableView, NSIndexPath indexPath)<br> {<br> <span style="color: #333399; font-weight: bold;">var</span> cell = <span style="color: #008800; font-weight: bold;">new</span> UITableViewCell(UITableViewCellStyle.Default, <span style="color: #008800; font-weight: bold;">null</span>);<br> <span style="color: #333399; font-weight: bold;">var</span> dataSet = data[indexPath.Row];<br><br> <span style="color: #008800; font-weight: bold;">if</span> (dataSet != <span style="color: #008800; font-weight: bold;">null</span>)<br> {<br> cell.TextLabel.Text = dataSet.Name;<br> cell.DetailTextLabel.Text = dataSet.MobileNumber;<br> }<br><br> <span style="color: #008800; font-weight: bold;">return</span> cell;<br> }<br><br> <span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">override</span> nint <span style="color: #0066bb; font-weight: bold;">RowsInSection</span>(UITableView tableview, nint section)<br> {<br> <span style="color: #008800; font-weight: bold;">return</span> data.Count;<br> }<br> }<br>}<br></pre></td>
</tr></tbody></table></div>
<div style='-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;'>
<div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;"><br></div>
<div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;"><span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US"><span style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;"><br></span></span></div>
<div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{173}" paraid="344809308" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US"><span style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">Run the app to see the result like below.</span></span><span data-ccp-props='{"201341983":0,"335559739":160,"335559740":360}' style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;'> </span><br><div style="clear: both; text-align: center;"><span data-ccp-props='{"201341983":0,"335559739":160,"335559740":360}' style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px; text-align: left;'><br></span></div>
<div style="clear: both; text-align: center;"><span data-ccp-props='{"201341983":0,"335559739":160,"335559740":360}' style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px; text-align: left;'><br></span></div>
<div style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-bQ6llOK--zs/XfXRMerCHdI/AAAAAAAAPeY/QXIB9zcw4xgiXOMqRnluwAPYzsWVioQHgCEwYBhgL/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="765" data-original-width="361" height="400" src="https://1.bp.blogspot.com/-bQ6llOK--zs/XfXRMerCHdI/AAAAAAAAPeY/QXIB9zcw4xgiXOMqRnluwAPYzsWVioQHgCEwYBhgL/s400/5.png" width="188"></a></div>
<div style="clear: both; text-align: center;"><br></div>
<div style="clear: both; text-align: center;"><br></div>
<div style="clear: both; text-align: left;"><br></div>
<span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US"><span style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; margin: 0px; padding: 0px; user-select: text;">Full source is <a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank">here</a></span></span><span data-ccp-props='{"201341983":0,"335559739":160,"335559740":360}' style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;'><a href="https://github.com/logeshpalani98/Xamarin.iOS-Samples" target="_blank"> </a></span>
</div>
</div>
<div style='-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;'><div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{177}" paraid="1728029882" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;"><br></div></div>
<div style='clear: both; cursor: text; direction: ltr; font-family: "segoe ui", "segoe ui web", arial, verdana, sans-serif; font-size: 12px; margin: 0px; overflow: visible; padding: 0px; position: relative;'><div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{181}" paraid="1362769525" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;">
<span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US">I believe by now you’d have understood how to use Default </span><span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US"><span style='-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: inherit; background-image: url("data:image/gif; background-position: left bottom; background-repeat: repeat-x; border-bottom: 1px solid transparent; margin: 0px; padding: 0px; user-select: text;'>Tableview</span></span><span data-contrast="auto" lang="EN-US" style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; line-height: 27px; margin: 0px; padding: 0px;' xml:lang="EN-US"> <span style="font-weight: 400;">cells. Please share if you have any queries in the comment’s section. </span></span><span data-ccp-props='{"201341983":0,"335559739":160,"335559740":360}' style='font-family: "verdana" , "verdana_msfontservice" , sans-serif; font-size: 11pt; font-weight: 400; line-height: 27px; margin: 0px; padding: 0px;'> </span>
</div></div>
<div style='-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; clear: both; cursor: text; direction: ltr; font-family: "Segoe UI", "Segoe UI Web", Arial, Verdana, sans-serif; font-size: 12px; font-weight: 400; margin: 0px; overflow: visible; padding: 0px; position: relative; user-select: text;'><div paraeid="{c7724941-b554-4c0b-a08b-42ffdf6964e4}{187}" paraid="954535358" style="-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; background-color: transparent; color: windowtext; overflow-wrap: break-word; padding: 0px; user-select: text; vertical-align: baseline;"><br></div></div></contactmodel></contactmodel>