Achieve MvxListView alternate row background images if itemsource binding from viewmodel

问题

I am newbie in Xamarin Android and MvvmCross and I have been trying to achieve alternate rows background for MvxListView. Below is my code for MvxListView

<Mvx.MvxListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="@null"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_above="@+id/llSubtotal"
android:cacheColorHint="@android:color/transparent"
local:MvxBind="ItemsSource Items;ItemClick ItemSelectedCommand"
local:MvxItemTemplate="@layout/listviewitem"
android:id="@+id/mvxLVCustomerItemList" />

I am binding itemsource of listview from ViewModel.

Template for above Listview is ListViewItem.axml as below -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:id="@+id/lvItemTemplate"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/odd">
<Mvx.MvxImageView
android:layout_width="150dp"
android:layout_height="fill_parent"
android:id="@+id/ivItemImage"
android:textSize="40dp"
android:layout_gravity="center_horizontal|center"
local:MvxBind="ImageUrl StripUrl" />
<TextView
android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:id="@+id/tvItemName"
android:layout_height="fill_parent"
local:MvxBind="Text Title" />
</LinearLayout>

I tried to achieve alternate rows using custom adapter but in that case listview does not show data. Somehow I failed for it due to my lack of knowledge on Android or MvvmCross.

Any Help will be highly appreciated.

Please note that this project is in Xamarin and has only Android app in it. There is no UWP or other in my project this is completely Xamarin Android with MvvmCross.

回答1:

One way to do so is to have a bool property in your ViewModel that you can bind to and with a converter set the corresponding background image, e.g.:

ViewModels:

public class MyItemViewModel
{
    public MyItemViewModel(bool changeBackground)
    {
        this.ChangeBackground = changeBackground;
    }

    public bool ChangeBackground { get; set; }
}

public class MyListViewModel
{
    public ObservableCollection<MyItemViewModel> MyItems { get; set; }

    private void MyItemsInit()
    {
         this.MyItems = new ObservableCollection<MyItemViewModel>();

         for (int i = 0; i < 10; i++)
             this.MyItems.Add(new MyItemViewModel(i % 2 == 0));
    }
}

Converter:

public class BoolToMyImageToggleConverter : MvxValueConverter<bool, string>
{
    protected override string Convert(bool value, Type targetType, object parameter, CultureInfo culture)
    {
        // this is just for android but you can take advantage of CrossDeviceInfo plugin to return the path to the image depending on the platform you are on.
        return value ? "@drawable/my_image_1" : "@drawable/my_image_2";
    }
}

Item view:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:id="@+id/lvItemTemplate"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxBind="DrawableName BoolToMyImageToggle(ChangeBackground)">

    <Mvx.MvxImageView
    android:layout_width="150dp"
    android:layout_height="match_parent"
    android:id="@+id/ivItemImage"
    android:textSize="40dp"
    android:layout_gravity="center_horizontal|center"
    local:MvxBind="ImageUrl StripUrl" />
    <TextView
    android:layout_marginTop="20dp"
    android:layout_width="match_parent"
    android:id="@+id/tvItemName"
    android:layout_height="match_parent"
    local:MvxBind="Text Title" />

</LinearLayout>

HIH

来源：https://stackoverflow.com/questions/49809679/achieve-mvxlistview-alternate-row-background-images-if-itemsource-binding-from-v

标签

Xamarin

xamarin.android

mvvmcross