MvvmCross: Bind each Item of a List

Question

I want to have a list of ChecboxElements, where the first sets the checked state of all other items when clicked.

This first one I can bind correctly, but for the child element, I encounter some problems.

How can I dynamically add items and bind them to properties of objects in a list?

var checkboxElement = new CheckboxElement("[All]");

var set = this.CreateBindingSet<LocationFilterView, LocationFilterViewModel>();
set.Bind(checkboxElement).For(v => v.Value).To(vm => vm.AllChecked).TwoWay();
section.Add(checkboxElement);

var checkListBindingSet = this.CreateBindingSet<LocationFilterView, CheckListItemViewModel>();
foreach (var checkListItem in ViewModel.As<LocationFilterViewModel>().CheckList)
{
    var item = new CheckboxElement(checkListItem.Caption);

    checkListBindingSet.Bind(item).For(v => v.Value).To(vm => vm.IsChecked).TwoWay();

    section.Add(item);
}

set.Apply();
checkListBindingSet.Apply();

EDIT: Maybe I have to ask this in a simpler way: I would like to display a list of check options (not radio) on a single page, the checkbox view models are held in a list on the main view model. In Android, this could be easily done with a Mvx.MvxListView, the MvxItemTemplate property and a CheckBox in the template layout. For iOS, I'm just not able to get the binding working...

Answer 1

I found the solution myself (but Rana was actually pointing in the right direction): I had to put the element binding to a separate view:

// ...
var set = this.CreateBindingSet<LocationFilterView, LocationFilterViewModel>();

var selectAll = new ActivityElement { Caption = "All", Animating = false, ShouldDeselectAfterTouch = true };
set.Bind(selectAll).For(v => v.SelectedCommand).To(vm => vm.SelectAllCommand).TwoWay();
sectionButtons.Add(selectAll);

var selectNone = new ActivityElement { Caption = "None", Animating = false, ShouldDeselectAfterTouch = true };
set.Bind(selectNone).For(v => v.SelectedCommand).To(vm => vm.SelectNoneCommand).TwoWay();
sectionButtons.Add(selectNone);

var checkListItemViewModels = this.ViewModel.As<LocationFilterViewModel>().CheckList;
foreach (var view in checkListItemViewModels.Select(checkListItem => new CheckListItemView { ViewModel = checkListItem }))
{
    view.CheckboxElement.Caption = view.ViewModel.Caption;

    section.Add(view.CheckboxElement);
}

set.Apply();
// ...

public class CheckListItemView : BaseView
{
    public CheckListItemView()
    {
        var set = this.CreateBindingSet<CheckListItemView, CheckListItemViewModel>();

        var item = new CheckboxElement();

        set.Bind(item).For(v => v.Value).To(vm => vm.IsChecked).TwoWay();

        set.Apply();

        this.CheckboxElement = item;
    }

    public new CheckListItemViewModel ViewModel
    {
        get { return base.ViewModel.As<CheckListItemViewModel>(); }
        set { base.ViewModel = value; }
    }

    public Element CheckboxElement { get; set; }
}

Answer 2

so are you trying to use two ViewModels within one View (CheckListItemViewModel)? If that's not a requirement, then you don't need checkListBindingSet; so..

foreach (var checkListItem in ViewModel.CheckLists)
{
    var item = new CheckboxElement(checkListItem.Caption);

    set.Bind(item).For(v => v.Value).To(vm => vm.IsChecked).TwoWay();

    section.Add(item);
}

should do the trick;