Bind RadioGroup inside MvxListView

Question

I've got some very tricky problem. I already tried to search the web and even looked into the MvvmCross sources, but I don't seem to be able to figure it out.

I have an MvxListView with a custom Adapter. The reason is, that depending on the "DataContext" of the current ListItem, I want to display some different view.

The list itself represents some sort of questionnaire. So the items in the list are in the form of

new Question("do you need help?"){
    new Answer("yes"),
    new Answer("no"),
    new Answer("maybe")
}

Now the answers shall be shown as a radio button list. So in my custom adapter on "GetChildView", I retrieve the view with the radiogroup and then I "just want to bind that group to my answers" --> so for each answer, there has to be a corresponding radiobutton.

I would love to have the "Answer" object as datacontext for each radiobutton.

radioButton.Bind("Checked", "Chosen"); // where "Chosen" is the boolean property on "Answer"

But it would already be fine if the "Question" object could be the datacontext that I bind to

radioGroup.Bind("CheckedRadioButtonId", "ChosenAnswer"); // where "ChosenAnswer" is an int property

on "Question"

So basically I want to bind my radiobutton to the MvxListItem.DataContext in code inside my customadapter. But I just cannot figure out how to do that. :/

Can you please give me a hint?

Of course I would love to do the same with a list of checkboxes as soon as multiple answers would be allowed.

Hugo Logmans Hugo Logmans · Accepted Answer · 2013-09-17T09:25:54

Setting the datacontext is easy: just set it :)

What you do is you create a ViewModel called something like QuestionViewModel, which has what you need as a separet ViewModel.

Then create some component to use in your View for the complete questionnaire. Below is some example code for a bindable component.

public class BindableLinearLayout : ClickableLinearLayout, IMvxDataConsumer, IMvxBindingContextOwner 
    {
        public BindableLinearLayout(Orientation orientation, object dataContext)
            : base(orientation)
        {
            BindingContext = new MvxBindingContext();
            DataContext = dataContext;
        }



        public object DataContext { get { return BindingContext.DataContext; }
            set { BindingContext.DataContext = value;  }
        }

        public IMvxBindingContext BindingContext { get; set; }



    }

In the Questionnaire View, create this component and assign the datacontext (in the above example as a parameter). Then you can create the binding in the normal way:

    var bindings2 = layout.CreateBindingSet<BindableLinearLayout, ParagraphViewModel>();
    bindings2.Bind(numberText.View).For(t => t.Text).To(vm => vm.Paragraph.Number);
    bindings2.Apply();

This code is called for each element you add to the collection, eauch with its own Datacontext.

I known this code is not for a list adapter, but I hope this will give you enough hints how to do this yourself.

Bind RadioGroup inside MvxListView

1 Answers