如果从viewmodel绑定itemsource，则实现MvxListView备用行背景图像 [英] Achieve MvxListView alternate row background images if itemsource binding from viewmodel

问题描述

我是Xamarin Android和MvvmCross的新手，并且我一直在尝试为MvxListView实现备用行背景.下面是我的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" />

我要绑定ViewModel的listview的项目源.

上方Listview的模板为ListViewItem.axml，如下所示-

<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>

我尝试使用自定义适配器来实现备用行，但在这种情况下，listview不显示数据.由于缺乏对Android或MvvmCross的了解，我以某种方式失败了.

我们将非常感谢您的帮助.

请注意，该项目在Xamarin中，并且只有Android应用程序.我的项目中没有UWP或其他任何东西，这完全是带有MvvmCross的Xamarin Android.

解决方案

一种方法是在ViewModel中具有bool属性，您可以将其绑定并与转换器一起设置相应的背景图像，例如:

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));
    }
}

转换器:

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";
    }
}

项目视图:

<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

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.

解决方案

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

这篇关于如果从viewmodel绑定itemsource，则实现MvxListView备用行背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！