Table View In Xamarin iOS - Part Two🚀

Table View In Xamarin iOS
 

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 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 subviewsvalues.
 
Table View In Xamarin iOS
 
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.
 
Table View In Xamarin iOS
 
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 into their properties based on Index and your will code look as shown below.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using CoreGraphics;  
  4. using Foundation;  
  5. using UIKit;  
  6.   
  7. namespace TableViewSample  
  8. {  
  9.     internal class SampleTableViewSource : UITableViewSource  
  10.     {  
  11.         private IList<ContactModel> data;  
  12.         public SampleTableViewSource(List<ContactModel> data)  
  13.         {  
  14.             this.data = data;  
  15.         }  
  16.   
  17.         public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)  
  18.         {  
  19.             var cell = new UITableViewCell(UITableViewCellStyle.Default, null);  
  20.             var dataSet = data[indexPath.Row];  
  21.   
  22.             if (dataSet != null)  
  23.             {  
  24.                 cell.TextLabel.Text = dataSet.Name;  
  25.                 cell.ImageView.Image = UIImage.FromBundle("Phineas_Flynn");  
  26.             }  
  27.   
  28.             return cell;  
  29.         }  
  30.   
  31.         public override nint RowsInSection(UITableView tableview, nint section)  
  32.         {  
  33.             return data.Count;  
  34.         }  
  35.     }  

Run the application, your output will be like below.
 
Table View In Xamarin iOS
 
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. using System;  
  2. using System.Collections.Generic;  
  3. using CoreGraphics;  
  4. using Foundation;  
  5. using UIKit;  
  6.   
  7. namespace TableViewSample  
  8. {  
  9.     internal class SampleTableViewSource : UITableViewSource  
  10.     {  
  11.         private IList<ContactModel> data;  
  12.         public SampleTableViewSource(List<ContactModel> data)  
  13.         {  
  14.             this.data = data;  
  15.         }  
  16.   
  17.         public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)  
  18.         {  
  19.             var cell = new UITableViewCell(UITableViewCellStyle.Default, null);  
  20.             var dataSet = data[indexPath.Row];  
  21.   
  22.             if (dataSet != null)  
  23.             {  
  24.                 cell.TextLabel.Text = dataSet.Name;  
  25.                 cell.ImageView.Image = UIImage.FromBundle("Phineas_Flynn");  
  26.                 cell.DetailTextLabel.Text = dataSet.MobileNumber;  
  27.             }  
  28.   
  29.             return cell;  
  30.         }  
  31.   
  32.         public override nint RowsInSection(UITableView tableview, nint section)  
  33.         {  
  34.             return data.Count;  
  35.         }  
  36.     }  

Run the app to see the output.
 
Table View In Xamarin iOS
 
Sample C - Value Style
 
Finally, look into Value style type as well as changing 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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using CoreGraphics;  
  4. using Foundation;  
  5. using UIKit;  
  6.   
  7. namespace TableViewSample  
  8. {  
  9.     internal class SampleTableViewSource : UITableViewSource  
  10.     {  
  11.         private IList<ContactModel> data;  
  12.         public SampleTableViewSource(List<ContactModel> data)  
  13.         {  
  14.             this.data = data;  
  15.         }  
  16.   
  17.         public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)  
  18.         {  
  19.             var cell = new UITableViewCell(UITableViewCellStyle.Default, null);  
  20.             var dataSet = data[indexPath.Row];  
  21.   
  22.             if (dataSet != null)  
  23.             {  
  24.                 cell.TextLabel.Text = dataSet.Name;  
  25.                 cell.DetailTextLabel.Text = dataSet.MobileNumber;  
  26.             }  
  27.   
  28.             return cell;  
  29.         }  
  30.   
  31.         public override nint RowsInSection(UITableView tableview, nint section)  
  32.         {  
  33.             return data.Count;  
  34.         }  
  35.     }  
  36. }   
Run the app to see the result like below.
 
Table View In Xamarin iOS
 
Full source code here.
 
I believe by now you should understand how to use Default Tableviewcells. Please share if you have any queries in the comments section.