How to reflect changes in viewmodel to tableviewcell view with binding in MVVMcross

Question

Am a little stuck with getting changes reflected from the ViewModel to the View when used in a MvxBindableTableViewCell. I am using the vNext branch of MvvmCross on iOS.

Everything is set up properly and the initial values are visible when loading/showing the list for the first time. The list is a ObservableCollection<T> and the ViewModels inherit from MvxViewModel (thus implements INotifyPropertyChanged).

The main ViewModel looks like this:

public abstract class BaseViewModel : MvxViewModel, IMvxServiceConsumer
{
    //... just regular implementation
}

public class UploadListViewModel: BaseViewModel
{
    private readonly IUploadItemTasks uploadItemTasks;
    private readonly IPhotoPickerService photoPickerService;

    public IObservableCollection<UploadItemViewModel> Uploads { get { return this.LoadUploadItems(); }  }

    public UploadListViewModel()
    {
        this.uploadItemTasks = this.GetService<IUploadItemTasks>();
        this.photoPickerService = this.GetService<IPhotoPickerService>();
    }

    private IObservableCollection<UploadItemViewModel> LoadUploadItems()
    {
        using (var unitOfWork = UnitOfWork.Start ())
        {
            return new SimpleObservableCollection<UploadItemViewModel>(uploadItemTasks.GetAll());
        }
    }

    public void StartUpload ()
    {
        if (this.Uploads == null || this.Uploads.Count == 0) {
            ReportError("Error", "No images to upload");
            return;
        }

        this.Uploads.ForEach (uploadItem => PostCallback (uploadItem));
    }

    private void PostCallback (UploadItemViewModel uploadAsset)
    {
        IProgressReporter progressReporter = uploadAsset;

        this.photoPickerService.GetAssetFullImage(uploadAsset.ImageUrl,
                                                  (image) => {
            UIImage fullImage = image;
            NSData jpeg = fullImage.AsJPEG();

            byte[] jpegBytes = new byte[jpeg.Length];           
            System.Runtime.InteropServices.Marshal.Copy(jpeg.Bytes, jpegBytes, 0, Convert.ToInt32(jpeg.Length));

            MemoryStream stream = new MemoryStream(jpegBytes);
            Uri destinationUrl = new Uri(uploadAsset.DestinationUrl + "&name=" + uploadAsset.Name + "&contentType=image%2FJPEG");

            //TO DO: Move this to plugin
            var uploader = new Uploader().UploadPicture (destinationUrl, stream, UploadComplete, progressReporter);
            uploader.Host = uploadAsset.Host;

            ThreadPool.QueueUserWorkItem (delegate {
                uploader.Upload ();                 
                jpeg = null;
            });
        });
    }

    private void UploadComplete (string name)
    {
        if (name == null){
            ReportError("Error","There was an error uploading the media.");
        } else 
        {
            //ReportError("Succes", name);
        }
    }

The item ViewModel looks like:

public interface IProgressReporter
{
    float Progress { get; set;} 
}

public abstract class BaseAssetViewModel: BaseViewModel, IBaseAssetViewModel
{
    //... just regular properties 
}

public class UploadItemViewModel: BaseAssetViewModel, IProgressReporter
{
    public UploadItemViewModel(): base()
    {
    }

    private float progress;
    public float Progress {
        get {
            return this.progress;
        }
        set {
            this.progress = value;
            this.RaisePropertyChanged(() => Progress);
        }
    }
}

The View for the items inherits from MvxBindableTableViewCell and has the property:

private float progress;
public float ProgressMarker {
    get {
        return progress;
    }
    set {
        progress = value;
        // change progressbar or textfield here
    }
}

The tableviewcell is bounded to the UploadItemViewModel via the BindingText:

public const string BindingText = @"ProgressMarker Progress, Converter=Float;";

The Uploader class mentioned in the snippet of UploadListViewModel implements a private method which tries to set the progress on the IProgressReporter.

    float progressValue;
    void SetProgress (float newvalue)
    {
        progressValue = newvalue;

        this.dispatcher.InvokeOnMainThread (delegate {
            if (ProgressReporter != null)
                ProgressReporter.Progress = progressValue;
        });
    }

During the first viewing of the list I can see that the properties in both the ViewModel and View are being hit but when I update the ViewModel via the interface IProgressReporter with a new value in Progress the View in the tableviewcell is not updated nor the property is being called.

What am I doing wrong or what am I missing here?

UPDATE: Check the answer to this question.

Answer 1

I found why the binding didn't work. I was replacing the ObservableCollection over and over again.. I changed that piece of code as stated below and now it reflects the changes made to the UploadItemViewModel in the View of the cell.

    private IObservableCollection<UploadItemViewModel> uploads;
    private IObservableCollection<UploadItemViewModel> LoadUploadItems()
    {
        if (uploads == null)
        {
            using (var unitOfWork = UnitOfWork.Start ())
            {
                uploads = new SimpleObservableCollection<UploadItemViewModel>(uploadItemTasks.FindAll());
            }
        }
        return uploads;
    }