如何实现绑定ViewModel数据源的MvxListView交替行背景

嘿，作为刚接触Xamarin Android和MvvmCross的新手，想给MvxListView加上交替行背景其实很容易，我给你两种实用的方案，你可以选适合自己的：

方案一：自定义适配器（最直接推荐） #

这种方法不需要修改Item布局，直接在适配器里控制每行的背景，新手好上手：

1. 定义背景颜色 #

先在Resources/values/colors.xml里添加两个颜色值：

<color name="even_row_bg">#f5f5f5</color>
<color name="odd_row_bg">#ffffff</color>

2. 创建自定义适配器类 #

新建一个继承自MvxAndroidListAdapter的类，重写GetView方法来设置交替背景：

using Android.Content;
using Android.Graphics;
using Android.Views;
using Android.Widget;
using MvvmCross.Binding.Droid.BindingContext;

public class AlternateRowListAdapter : MvxAndroidListAdapter
{
    private readonly Color _evenColor;
    private readonly Color _oddColor;

    public AlternateRowListAdapter(Context context, IMvxAndroidBindingContext bindingContext) 
        : base(context, bindingContext)
    {
        // 从资源文件获取颜色
        _evenColor = Context.Resources.GetColor(Resource.Color.even_row_bg);
        _oddColor = Context.Resources.GetColor(Resource.Color.odd_row_bg);
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        // 获取默认的Item视图
        var itemView = base.GetView(position, convertView, parent);
        
        // 根据行号设置背景：偶数行（从0开始）用even颜色，奇数行用odd颜色
        itemView.SetBackgroundColor(position % 2 == 0 ? _evenColor : _oddColor);
        
        return itemView;
    }
}

3. 给MvxListView设置自定义适配器 #

在你的Activity/Fragment的OnCreate（或OnViewCreated）方法里，找到ListView并设置适配器：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    SetContentView(Resource.Layout.YourLayoutName);

    // 找到你的MvxListView（记得给xml里的ListView加android:id="@+id/list_view"）
    var listView = FindViewById<MvxListView>(Resource.Id.list_view);
    
    // 设置自定义适配器
    listView.Adapter = new AlternateRowListAdapter(this, new MvxAndroidBindingContext(this, this));
}

方案二：用绑定转换器（更贴合MvvmCross的MVVM思想） #

如果你想通过数据绑定来实现，可以用ValueConverter，不过需要稍微多几步：

1. 创建Position转颜色的转换器 #

using Android.Graphics;
using MvvmCross.Converters;
using System.Globalization;

public class PositionToBgColorConverter : MvxValueConverter<int, Color>
{
    protected override Color Convert(int position, Type targetType, object parameter, CultureInfo culture)
    {
        return position % 2 == 0 
            ? Color.ParseColor("#f5f5f5") 
            : Color.ParseColor("#ffffff");
    }
}

2. 修改自定义适配器与Item模板布局 #

先修改自定义适配器，在GetView里给绑定上下文添加position参数：

public override View GetView(int position, View convertView, ViewGroup parent)
{
    var bindingContext = new MvxAndroidBindingContext(Context, this);
    // 把position添加到绑定的参数里
    bindingContext.DataContext = new { Item = GetItem(position), Position = position };
    
    var itemView = InflateViewForPosition(position, convertView, parent, bindingContext);
    return itemView;
}

然后在Item布局文件（比如ItemLayout.axml）里，给根布局绑定BackgroundColor：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    local:MvxBind="BackgroundColor Position, Converter=PositionToBgColor">
    
    <!-- 你的Item内容，比如TextView绑定Item的属性：
    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        local:MvxBind="Text Item.YourProperty" />
    -->
</LinearLayout>

最后同样在Activity里给ListView设置这个自定义适配器就行。

注意事项 #

• 如果你用的是新版MvvmCross（比如7.x+），命名空间可能有变化，比如MvxAndroidListAdapter可能在MvvmCross.Binding.Droid.Views里，根据你的NuGet包版本调整。
• 记得给xml里的MvxListView加上android:id，这样才能在代码里找到它。

内容的提问来源于stack exchange，提问作者Nadeem Shaikh