Cards

The default elements of a card can be customized using the below properties of KanbanModel.

  • Title - Used to set the title of a card.
  • ImageURL - Used to set the image URL of a card. The image will be displayed at right side in default card template.
  • Category - Used to set the category of a card. Based on the category the cards will be added to the respective columns.
  • Description - Used to set the description text of a card.
  • ColorKey - Used to specify the indicator color key. The Color value of the corresponding Key should be added in IndicatorColorPalette collection of SfKanban.
  • Tags - Used to specify the tags of a card. The tags will be displayed at bottom in default card template.
  • ID - Used to set the ID of a card.
  • c#
  • new KanbanModel()
    {
        ID = 1,
        Title = "iOS - 1002",
        ImageURL = "Image1.png",
        Category = "Open",
        Description = "Analyze customer requirements",
        ColorKey = "Red",
        Tags = new string[] { "Incident", "Customer" }
    });

    Following code snippet is used to define the colors for each key.

  • c#
  • List<KanbanColorMapping> colorModels = new List<KanbanColorMapping>();
    colorModels.Add(new KanbanColorMapping("Green", Color.Green));
    colorModels.Add(new KanbanColorMapping("Red", Color.Red));
    colorModels.Add(new KanbanColorMapping("Aqua", Color.Aqua));
    colorModels.Add(new KanbanColorMapping("Blue", Color.Blue));
    kanban.IndicatorColorPalette = colorModels;

    Customization of cards in Xamarin.iOS Kanban

    Template

    You can replace the entire card template with your own design using SfKanban.KanbanDelegate ‘s GetItemViewCell override method . The following code snippet and screenshot illustrates this.

  • c#
  • public class CustomDelegate : KanbanDelegate
    {
    	public override UIView GetItemViewCell(KanbanColumn column, object data, int position)
    	{
    	    KanbanModel model = (KanbanModel)data;
    
    		UIView cell = new UIView();
    		cell.BackgroundColor = UIColor.Gray;
    
    		UILabel title = new UILabel();
    		title.TextColor = UIColor.White;
    		title.Text = model.Title;
    		title.Font = UIFont.SystemFontOfSize(20);
    
    		UITextView desc = new UITextView();
    		desc.TextColor = UIColor.White;
    		desc.Text = model.Description;
    		desc.BackgroundColor = UIColor.Clear;
    		desc.UserInteractionEnabled = false;
    		desc.Font = UIFont.SystemFontOfSize(16);
    
    		UIImageView avatar = new UIImageView();
    		avatar.Image = UIImage.FromFile(model.ImageURL);
    
    		title.Frame = new CoreGraphics.CGRect(10, 10, 250, 25);
    		desc.Frame = new CoreGraphics.CGRect(2, 40, 170, 75);
    		avatar.Frame = new CoreGraphics.CGRect(185, 45, 60, 60);
    
    		cell.AddSubview(title);
    		cell.AddSubview(desc);
    		cell.AddSubview(avatar);
    
    		return cell;
    	}
    }	
    
    public partial class ViewController : UIViewController
    {
    	private SfKanban kanban;
    
    	public override void ViewDidLoad()
    	{
    		base.ViewDidLoad();
    
    		kanban = new SfKanban();
    		kanban.Delegate = new CustomDelegate();
    		kanban.ColumnWidth = 280;
    	}
    }

    Template support for cards in Xamarin.iOS Kanban