Xamarin CollectionView Highlights incorrect Cell When Scrolling

Question

Hope you can help. I'm using Xamarin for Visual Studio 2013.

I have a collection view on a viewcontroller that loads data from a web service into cells on the page. This works fine and data is displayed correctly at the start.

There is an issue where the cells are randomly changing color when you scroll the list.

Can anyone see anything obvious to why this is happening? We have seen examples on here (CollectionView Highlights incorrect Cell When Scrolling) but none seem to relate to this specific issue.

I'm happy to clarify anything.

Here is the code:

UIViewController

                public partial class UIVCKitchenView : UIViewController
                {
                public static readonly EndpointAddress EndPoint = new EndpointAddress("");

                private CateringServiceClient _client; 

               public List<KitchenViewWard> wards = new List<KitchenViewWard>();

                public UIVCKitchenView (IntPtr handle) : base (handle)
                {

                }

                public override void ViewDidLoad()
                {
                    base.ViewDidLoad();
                    InitializeHelloWorldServiceClient();
                    //todo:pass code from prefrences
                    _client.GetListAsync("01");


                }

                partial void TmpK_TouchUpInside(UIButton sender)
                {            
                }

                private static BasicHttpBinding CreateBasicHttp()
                {
                    BasicHttpBinding binding = new BasicHttpBinding
                    {
                        Name = "basicHttpBinding",
                        MaxBufferSize = 2147483647,
                        MaxReceivedMessageSize = 2147483647
                    };
                    TimeSpan timeout = new TimeSpan(0, 0, 30);
                    binding.SendTimeout = timeout;
                    binding.OpenTimeout = timeout;
                    binding.ReceiveTimeout = timeout;
                    return binding;
                }

                private void InitializeHelloWorldServiceClient()
                {
                    BasicHttpBinding binding = CreateBasicHttp();

                    _client = new CateringServiceClient(binding, EndPoint);
                    _client.GetKitchenWardListCompleted += _client_GetKitchenWardListCompleted;

                }

                void _client_GetKitchenWardListCompleted(object sender, GetKitchenWardListCompletedEventArgs e)
                {
                    if (e.Error != null)
                    {
                        BeginInvokeOnMainThread(() =>
                        {
                            //Create Alert
                            var okAlertController = UIAlertController.Create("Problem", e.Error.Message, UIAlertControllerStyle.Alert);
                            //Add Action
                            okAlertController.AddAction(UIAlertAction.Create("Ok", UIAlertActionStyle.Default, null));
                            // Present Alert
                            PresentViewController(okAlertController, true, null);

                        });
                    }
                    else if (e.Cancelled)
                    {
                        //  txtResult.Text = "Request was cancelled.";
                    }
                    else
                    {

                        List<KitchenWardList> _items = new List<KitchenWardList>(e.Result);
                        foreach (KitchenWardList item in _items)
                        {
                            KitchenViewWard _ward = new KitchenViewWard();
                            _ward.WardName = item.WardName;
                            _ward.WardStatus = item.WardStatus.ToString();
                            _ward.WardStatusId = Convert.ToInt32(item.WardStatus);

                            wards.Add(_ward);
                        }

                        BeginInvokeOnMainThread(() =>
                        {
                            UICVKitchenViewWards.RegisterClassForCell(typeof(UICVCKitchenViewWardsCell), UICVCKitchenViewWardsCell.CellID);
                            UICVKitchenViewWards.Source = new UICVCKitchenViewWardsSource(wards);
                            UICVKitchenViewWards.Delegate = new UICVKitchenViewWardsDelegate();                   
                        });
                    }
                }

            }

UICollectionViewSource class UICVCKitchenViewWardsSource : UICollectionViewSource {

            public UIStoryboard MainStoryboard
            {

                get { return UIStoryboard.FromName("Main", NSBundle.MainBundle); }
            }

            //Creates an instance of viewControllerName from storyboard
            public UIViewController GetViewController(UIStoryboard storyboard, string viewControllerName)
            {
                return storyboard.InstantiateViewController(viewControllerName);
            }


            public List<KitchenViewWard> rows { get; set; }

            public UICVCKitchenViewWardsSource(List<KitchenViewWard> _rows)
            {
                rows = _rows;
            }

            public override nint NumberOfSections(UICollectionView collectionView)
            {            
                return 1;
            }

            public override nint GetItemsCount(UICollectionView collectionView, nint section)
            {         
                return rows.Count;
            }

            public override bool ShouldHighlightItem(UICollectionView collectionView, NSIndexPath indexPath)
            {         
                return true;
            }

            public override void ItemHighlighted(UICollectionView collectionView, NSIndexPath indexPath)
            {
                var cell = (UICVCKitchenViewWardsCell)collectionView.CellForItem(indexPath);
                //cell.BackgroundColor = UIColor.Yellow;
            }

            public override void ItemUnhighlighted(UICollectionView collectionView, NSIndexPath indexPath)
            {

                //var renderer = Platform.GetRenderer(page);

                var cell = (UICVCKitchenViewWardsCell)collectionView.CellForItem(indexPath);
                var UIVCKitchenViewController = GetViewController(MainStoryboard, "UIVCKitchenView");
                UIVCKitchenViewController.PerformSegue("seqShowKitchenDetails", this);

                //cell.BackgroundColor = UIColor.Orange;
            }

            public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)
            {
                var cell = (UICVCKitchenViewWardsCell)collectionView.CellForItem(indexPath);
                var UIVCKitchenViewController = GetViewController(MainStoryboard, "UIVCKitchenView");
                UIVCKitchenViewController.PerformSegue("seqShowKitchenDetails", this);
            }

            public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
            {            
                var cell = (UICVCKitchenViewWardsCell)collectionView.DequeueReusableCell(UICVCKitchenViewWardsCell.CellID, indexPath);
                cell.updateCell(rows[indexPath.Row]);

                return cell;
            }

        }

UICollectionViewCell

    public partial class UICVCKitchenViewWardsCell : UICollectionViewCell
    {
    public UILabel wardName;
    public static NSString CellID = new NSString("UICVCKitchenViewWardsCell");

            [Export("initWithFrame:")]
            public UICVCKitchenViewWardsCell(CGRect frame)
                : base(frame)
            {
                ContentView.BackgroundColor = new UIColor(225f / 255f, 225f / 255f, 225f / 255f, 1f);
                ContentView.Layer.BorderWidth = 1.0f;
                ContentView.Layer.BorderColor = new CGColor(0f / 255f, 134f / 255f, 255f / 255f);

                wardName = new UILabel();            
                ContentView.AddSubviews(new UIView[] { wardName });
            }

            public void updateCell(KitchenViewWard ward)
            {
                wardName.Text = ward.WardName;            
                wardName.Frame = new CGRect(10, 25, ContentView.Bounds.Width - 20, 21);

                switch (ward.WardStatusId)
                {
                    case (int)WardOrderStatus.InProcess:
                        ContentView.BackgroundColor = new UIColor(255f / 255f, 204f / 255f, 0f / 255f, 1f);
                        break;
                    case (int)WardOrderStatus.Loaded:
                        ContentView.BackgroundColor = new UIColor(255f / 255f, 149f / 255f, 0f / 255f, 1f);
                        break;
                    case (int)WardOrderStatus.Nostatus:
                        break;
                    case (int)WardOrderStatus.OrderSent:
                        ContentView.BackgroundColor = new UIColor(90f / 255f, 200f / 255f, 250f / 255f, 1f);
                        break;
                    case (int)WardOrderStatus.Served:
                        ContentView.BackgroundColor = new UIColor(76f / 255f, 217f / 255f, 100f / 255f, 1f);

                        break;

                    default:
                        break;
                }
            }
        }

Answer 1

In your UITableViewCell subclass please override prepareForReuse() and set the background color to white or whatever your default value is.

UITableViewCells get reused so when they already have a color assigned you will get a cell that is already colored when it gets dequeued instead of a "fresh" one.