Custom Table View in Xamarin iOS
Tags: customtableviewin, tableviewcell, tableview, xamarinios
Published: 2020-02-15 02:41:43

---
title: Custom Table View in Xamarin iOS
published: true
date: 2020-02-15 02:02:00 UTC
tags: Custom Table View in,Table View Cell,TableView,Xamarin iOS
canonical_url: https://logeshpalani.blogspot.com/2020/02/custom-table-view-in-xamarin-ios.html
---

  

[![](https://1.bp.blogspot.com/-bIWEa7R8YVY/XkV-0Tr_cXI/AAAAAAAAP3Q/W57qGANLJgU-_Ux-DswH6NoLdKnAka1jgCEwYBhgL/s1600/Custom%2BTable%2BView%2Bin%2BXamarin%2BiOS.png)](https://1.bp.blogspot.com/-bIWEa7R8YVY/XkV-0Tr_cXI/AAAAAAAAP3Q/W57qGANLJgU-_Ux-DswH6NoLdKnAka1jgCEwYBhgL/s1600/Custom%2BTable%2BView%2Bin%2BXamarin%2BiOS.png)
  
  
**Introduction**  
  
In my previous article, we discussed the _TableView_ and their default cell behaviors. Now, we going to learn about how to use a custom table view cell in TableView. I won't like writing a lot of theory we can directly go with code.  
  
**Let's start.**  
  
Create Xamarin iOS Single View Application by going Visual Studio >> New >> Project >> Single view Application under iOS section.  
  
After the project creation open Main.StoryBoard and place _UITableView_. Set the _TableView_ frame size equal to view size and set constraints.  
  

[![](https://1.bp.blogspot.com/-e7tAk_I5vfU/XkV-121zU4I/AAAAAAAAP3g/ucKD1CCzPrk4ZwT28u4I-tsVv0PoSWe4gCEwYBhgL/s320/Screenshot%2B2020-02-12%2Bat%2B12.35.11%2BPM.png)](https://1.bp.blogspot.com/-e7tAk_I5vfU/XkV-121zU4I/AAAAAAAAP3g/ucKD1CCzPrk4ZwT28u4I-tsVv0PoSWe4gCEwYBhgL/s1600/Screenshot%2B2020-02-12%2Bat%2B12.35.11%2BPM.png)
  
  
Now, create new Table View Cell by doing, right-click the project and select Add >> followed by select new File. In the dialog window left plane select iOS and center plane select _Table View Cell_ template and give the file a name then click _New_ [Eg- MyTableViewCell].  
  

[![](https://1.bp.blogspot.com/-fejBwtwxaKE/XkV-0bj1m6I/AAAAAAAAP3w/Q2W6r-eGfjcCm9Vhi8ZCZ1NQJnEJhtnSQCEwYBhgL/s320/Screenshot%2B2020-02-04%2Bat%2B7.23.04%2BPM.png)](https://1.bp.blogspot.com/-fejBwtwxaKE/XkV-0bj1m6I/AAAAAAAAP3w/Q2W6r-eGfjcCm9Vhi8ZCZ1NQJnEJhtnSQCEwYBhgL/s1600/Screenshot%2B2020-02-04%2Bat%2B7.23.04%2BPM.png)
  
  
Afterward, the new _XIB_ and _cs_ extension file will be created with your given name. Now, open the XIB file in your designer (my favorite and recommend XCode). Next, the drag a button from the toolbox and place the starting of the cell. As well as place another label after the button. Apply corner radius and other properties in the property window.  
  
Note - you must give _Cell_ reuse identifier, otherwise you won't have access for the cell  
  

[![](https://1.bp.blogspot.com/-ocUzDLk_oUc/XkV-1j6bnVI/AAAAAAAAP3s/mU3ejJjuodYHlAu4dT0M5hBxDmxUm6jDQCEwYBhgL/s320/Screenshot%2B2020-02-12%2Bat%2B12.34.58%2BPM.png)](https://1.bp.blogspot.com/-ocUzDLk_oUc/XkV-1j6bnVI/AAAAAAAAP3s/mU3ejJjuodYHlAu4dT0M5hBxDmxUm6jDQCEwYBhgL/s1600/Screenshot%2B2020-02-12%2Bat%2B12.34.58%2BPM.png)
  
  
Next, open _MyTableViewCell.cs_ file and create a new static method named _UpdateData_. This method used to update the content of the cell. because we couldn't access the cell subviews from another class  
  
<script src="https://gist.github.com/logeshpalani98/8c1d4df0753a426997bf544895aa0a7f.js"></script>  
  
Now, create a new Table View Source Class named _MyTableViewSource.cs._  This class should be inherited from _UITableViewSource_ and override _GetCell, RowSelect_ and _RowInSelection_ method.  
  
<script src="https://gist.github.com/logeshpalani98/94d51f2e492bd8a0852d7c08ee4d3e8c.js"></script>  
  
Finally, open _ViewController_ class and apply source class to the TableView source. Here, you should call _ReloadData_ static method. Create an array of string and pass-through constructor and apply the values to the cell.  
<script src="https://gist.github.com/logeshpalani98/d87bdce5ff5875ef77aacd018a9c8ce3.js"></script>  
  
Here, we have one problem, if the user selects the row, the event will trigger in the source class, but I need to navigate to another view controller based on selection, there is no option to navigate _ViewController_. So, I need to write an interface and pass it to the source class. now user select row, the view controller method will be invoked using Interface and write your navigate code logics here.  
  
<script src="https://gist.github.com/logeshpalani98/f501d0475c2b78e7d6ba8e30e0609dfd.js"></script>  
  
It's time to run our application and our application output like below.  
  

[![](https://1.bp.blogspot.com/-K9dHhJIlwdc/XkV-0p8g3EI/AAAAAAAAP3o/0xjpkb3BrVA0vLB8FQRKSAKtU_3GtO_KACEwYBhgL/s320/Screenshot%2B2020-02-12%2Bat%2B12.22.52%2BPM.png)](https://1.bp.blogspot.com/-K9dHhJIlwdc/XkV-0p8g3EI/AAAAAAAAP3o/0xjpkb3BrVA0vLB8FQRKSAKtU_3GtO_KACEwYBhgL/s1600/Screenshot%2B2020-02-12%2Bat%2B12.22.52%2BPM.png)
  
  
Full Source Code Here - https://github.com/logeshpalani98/Xamarin.iOS-Samples

Summary  

- Create a new Table View
- Add new Table View Cell and design the cell
- Create a TableView source class
- Apply source class toTableView 
- Create a new Navigate interface and use it.

Thanks for reading !!!