MvvmCross Android MvxListView DrawableName not refreshing

Question

I am using MvvmCross 3.2.2 for an Android/iOS App and am experiencing a MvxListView that doesn't refresh and ImageView bound using DrawableName unless the item concerned is scrolled off screen and back.

DataModel

public class VehicleStatus
{
    public string VehicleRegistration { get; set; }
    public bool Selected { get; set; }
    public string DrawableName
    {
        get
        {
            string res = (Selected) ? "on" : "off";
            return  res;
        }
    }
}

Both "on" and "off" are png resources that are within the Drawable folder.

MvxListView Layout Excerpt

       <Mvx.MvxListView
            android:id="@+id/listItems"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:dividerHeight="2dp"
            android:divider="@drawable/list_divider"
            local:MvxBind="ItemsSource Units; ItemClick VehicleSelectedCommand"
            local:MvxItemTemplate="@layout/list_unit" />

MvxItemTemplate

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:local="http://schemas.android.com/apk/res/xxxxxxx.Droid"
   android:orientation="horizontal"
   android:layout_width="fill_parent"
   android:background="@color/white"
   android:layout_height="62dp">
   <TextView
       android:id="@+id/unitsName"
       android:layout_width="wrap_content"
       android:layout_height="fill_parent"
       android:textSize="18dp"
       android:gravity="center"
       android:layout_margin="7dp"
       android:textColor="@color/verydarknavy"
       local:MvxBind="Text VehicleRegistration" />
    <ImageView
       android:id="@+id/notificationUnitImage"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginRight="21dp"
       android:layout_centerVertical="true"
       android:layout_alignParentRight="true"
       local:MvxBind="DrawableName DrawableName "
       android:tint="@color/verydarknavy" />
</RelativeLayout>

ViewModel

    private ObservableCollection<VehicleStatus> _units;
    public ObservableCollection<VehicleStatus> Units
    {
        get { return _units; }
        set { _units = value;
            RaisePropertyChanged (() => Units); }
    }

and the Command

    public void VehicleSelected (VehicleStatus item)
    {
        if (item != null)
        {
            foreach (var unit in _units)
            {
                if (unit.Id == item.Id)
                {
                    unit.Selected = !unit.Selected;
                    break;
                }
            }
            RaisePropertyChanged (() => Units);
        }
    }

    private MvxCommand<VehicleStatus> _vehicleSelectedCommand;
    public System.Windows.Input.ICommand VehicleSelectedCommand 
    {
        get
        {
            _vehicleSelectedCommand = _vehicleSelectedCommand ?? new MvxCommand<VehicleStatus>(VehicleSelected);
            return _vehicleSelectedCommand;
        }
    }

I think that is all the relevant bits of source. I assume that I am missing something to get the ImageView to refresh, but I have no idea what. Any ideas would be appreciated.

Stuart Stuart · Accepted Answer · 2014-12-19T15:04:24

Try :

inheriting VehicleStatus from MvxNotifyPropertyChanged
within VehicleStatus signal the changes using RaisePropertyChanged() calls as the changes happen

For a bonus point, it might also be good to use a converter to change the Selected property into the DrawableName one automatically.

MvvmCross Android MvxListView DrawableName not refreshing

1 Answers