How do I bind multiple properties in an Android layout element

Question

I'm using MvvmCross to databind my ViewModel to an Android View layout.

From the SimpleBinding example I can see that to bind a value to a property I do this:

  <EditText
    android:hint="Subtotal"
    android:gravity="left"
    android:inputType="numberDecimal"
    android:maxLines="1"
    android:numeric="decimal"        
    local:MvxBind="{'Text':{'Path':'SubTotal','Converter':'Float'}}"
  />

so Text is bound to the SubTotal property of the ViewModel. But how do I bind to more than one property? In my case I want to bind a ViewModel property called HigherLower to the TextColor attribute of the layout element. I can't add another MvxBind and I can't set MvxBind to an array.

Can have a look at the example in this blog post: https://www.casseykeating.com/home/2017/6/26/conversion-bindings — cfl, Jul 03 '17 at 19:16

Stuart · Accepted Answer · 2012-05-21T21:17:28.417

The format of the JSON used in the binding expression is a Dictionary of named MvxJsonBindingDescriptions

public class MvxJsonBindingDescription
{
    public string Path { get; set; }
    public string Converter { get; set; }
    public string ConverterParameter { get; set; }
    public string FallbackValue { get; set; }
    public MvxBindingMode Mode { get; set; }
}

This is used with:

the dictionary Key name being the target (View) property for the binding.
the binding Path property being the source (DataContext) property for the binding - if Path is not specified then the whole DataContext itself is the binding source.

For Activity/View level axml the DataContext is the ViewModel - but for sub-View axml then the DataContext will normally be a child object of the ViewModel - e.g. inside a ListView the DataContext might be an item inside a List or ObservableCollection owned by the ViewModel.

To specify multiple bindings you can use JSON like:

 {
      'TargetProperty1':{'Path':'SourceProperty1'},
      'TargetProperty2':{'Path':'SourceProperty2'}
 }

For your particular example this might be:

local:MvxBind="
       {
          'Text':{'Path':'SubTotal','Converter':'Float'}, 
          'TextColor':{'Path':'HigherLower','Converter':'MyColorConverter'}
       }"

where your ViewModel is something like:

public class MyViewModel : IMvxViewModel
{
     public float SubTotal { get; set; }

     public bool HigherLower { get; set; }

     // more code here
}

and your converter is something like:

public class MyColorConverter : MvxBaseColorConverter
{
    protected override MvxColor Convert(object value, object parameter, CultureInfo culture)
    {
        return ((bool)value) ? new MvxColor(255,0,0) : new MvxColor(0,255,0);
    }
}

and where that converter is initialized during Setup - e.g. see how the properties of the Converters class are used in TwitterSearch

One sample that shows Multiple Bindings at work is BestSellers - see Click and Text bound in the list item https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20BestSellers/BestSellers/BestSellers.Droid/Resources/Layout/ListItem_Category.axml

Thanks, this is working but we have hit a problem. there is no TextColor property. There is a readonly TextColors property and a SetTextColor() method. This obviously makes databinding difficult. Any suggestions? (I can raise as another SO post if you think its worth it) — Jason Steele, May 22 '12 at 10:01
yeah - that will require a longer explanation than I can do in a comment... you're looking at "how do I do custom bind properties"! It's not too bad to code, but it's a bit of a mind-f to read about :) — Stuart, May 22 '12 at 10:11
I've reposted here http://stackoverflow.com/questions/10700445/in-mvvmcross-how-do-i-do-custom-bind-properties — Jason Steele, May 22 '12 at 10:55

Matthew · Answer 2 · 2012-05-22T08:45:20.393

1

Path':'HigherLowerYou must do this:

local:MvxBind="{'Text':{'Path':'SubTotal','Converter':'Float'}, 'TextColor':{'Path':'HigherLower','Converter':'Color'}}"

Note the:

bind="{ 'Text':{xx}, 'Other':{yy} }"

edited May 22 '12 at 08:45

answered May 21 '12 at 16:22

Matthew

4,832
2
29
55

+1 thanks! Yup, it's normal Json - an example of multiple bindings in action at https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20BestSellers/BestSellers/BestSellers.Droid/Resources/Layout/ListItem_Category.axml – Stuart May 21 '12 at 17:46
actually - not quite right now I read it again... your second binding is off. Will explain in an answer – Stuart May 21 '12 at 17:57
@Stuart What was wrong with the second binding? If you mean the `'Text':{xx}`, the `xx` was just a placeholder for the binding information. – Matthew May 22 '12 at 07:45
Sorry for the confusion - I meant there's a problem in the second binding in the first code section. The `'TextColor':'SubTotal'` is the wrong part - it doesn't map to the JSON stucture which is expecting properties of `Path`, `Converter`, etc. – Stuart May 22 '12 at 08:33
@Stuart Oh, Ok, I copied and pasted the text wrong... I will edit. My bad. – Matthew May 22 '12 at 08:43

How do I bind multiple properties in an Android layout element

2 Answers2

Linked