Custom Cell with lots of objects ?

[Tony]

I have looked thru the documentation and examples, so find an example of the ListView control, having its entirely custom cell.

 It could for example with 3 TextBox controls, 2 ImageViews and other stuff.

 How do I accomplish that ?

[Yoanna]

Hey Tony, 

thank you for contacting us.

In order to achieve the described scenario you need to create a custom cell that inherits from TKListViewCell like below:

public class ImageWithTextListViewCell : TKListViewCell
    {
        public UILabel Label;
        public ImageWithTextListViewCell(IntPtr ptr) : base(ptr)
        {
            this.ContentView.BackgroundColor = new UIColor (0.91f, 0.91f, 0.91f, 1.0f);
            this.TextLabel.BackgroundColor = new UIColor (0.91f, 0.91f, 0.91f, 1.0f);
            this.TextLabel.Lines = 0;
            this.TextLabel.LineBreakMode = UILineBreakMode.WordWrap;
            this.TextLabel.TextAlignment = UITextAlignment.Center;
            this.TextLabel.Font = UIFont.FromName ("Optima-Regular", 16);
            this.TextLabel.Layer.CornerRadius = 3;
            this.TextLabel.Layer.MasksToBounds = true;
            this.Label = new UILabel ();
            this.Label.Text = "TEXT";
            this.AddSubview (Label);
        }

        public override void LayoutSubviews ()
        {
            base.LayoutSubviews ();
            this.Label.Frame = new CGRect (20, 20, 50, 50);
            this.ImageView.Frame = new CGRect (15, 0, 120, 150);
            this.TextLabel.Frame = new CGRect (0, this.ImageView.Frame.Size.Height, this.Frame.Size.Width, 60);
        }
    }

Please note that the property called Label is added to this custom cell. You can add as many controls as you wish this way and position them by your taste. 

Once you have prepared a custom cell you should register it in list view so it would be used :

listView.RegisterClassForCell (new Class(typeof(ImageWithTextListViewCell)), "cell");

Then all you need to do is setup the cell in the CellForItem method of TKListViewDataSource and return it:

class ListViewDataSource : TKListViewDataSource
{

public override TKListViewCell CellForItem (TKListView listView, NSIndexPath indexPath)

            {

                ImageWithTextListViewCell cell = (ImageWithTextListViewCell)listView.DequeueReusableCell ("cell", indexPath);

                

                cell.ImageView.Image = new UIImage (imageName);

                cell.TextLabel.Text = "Existing label";

                cell.Label.Text = "Additional label";

                return cell;

            }
}

Make sure you assign your ListViewDataSource class to TKListView data source property:

this.listViewDataSource = new ListViewDataSource (this);
listView.DataSource = this.listViewDataSource;

I hope this points you in the right direction. If you need further assistance do not hesitate to contact us. 

Regards,
Yoanna
Telerik

[Ngo Dinh]

Yoanna. My English skill is low level, I creat a view file (.xib), delete default UIView and drap and drop 3 lable in tool box and add name lb1,lb2,lb3, I add class CustomCell  for it.

partial class CustomCell : TKListViewCell
    {
        
        public CellInvoice(IntPtr handle) : base(handle)
        {
        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            
        }

        public void UpdateCell(string text1, string text2, string text3)
        {
            lb1.Text = text1;

            lb2.Text = text2;

            lb3.Text = text3;
        }
    }

I add class  public class CustomTableSource : TKListViewDataSource

{

  public override TKListViewCell CellForItem(TKListView listView, NSIndexPath indexPath)
        {
             listView.RegisterNib(UINib.FromName(_cellIdentifier, null), _cellIdentifier);
            var cell = listView.DequeueReusableCell(_cellIdentifier, indexPath) as CellInvoice ?? new CellInvoice(indexPath.Handle);
            cell.UpdateCell("1","2","3");
            return cell;
        }

}

 

There must be the right way

[Adrian]

Hello, Ngo Dinh Tung,

Registering the list view to use your custom cell should not be done in the data source. More appropriate place to do this is the ViewDidLoad method of your UIViewController. Consider the code below:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    listView.RegisterNib(UINib.FromName(_cellIdentifier, null), _cellIdentifier);
}

Regards,
Adrian
Telerik