使用 mvvmcross 和 mvxlistview 在自定义布局内单击绑定按钮

Question

我想在我的自定义布局中绑定一个按钮点击事件，下面是我的自定义布局

<?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-auto"
    android:layout_width="match_parent"
    android:layout_height="63dp">
    <LinearLayout
        android:orientation="horizontal"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <Button
            android:text="Accept"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/acceptBtnOnList"
            android:background="@color/green_color"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold"
            android:layout_weight="1"
            android:textColor="@android:color/background_light"
            local:MvxBind="Click AcceptCommand" />
    </LinearLayout>
</RelativeLayout>

下面是我的 ListView 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/background_light">
    <Mvx.MvxListView
        android:id="@+id/ListView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:cacheColorHint="#FFDAFF7F"
        local:MvxBind="ItemsSource MyList; ItemClick ShowDetailCommand"
        local:MvxItemTemplate="@layout/customlayout" />
</LinearLayout>

正如你在上面看到的，我在 listview 布局中调用了我的 customlayout

下面是我的 ViewModelClass

public class ListViewModel : BaseViewModel
    {
    public IListService ListService { get; set; }

    private MvxCommand _acceptCommand;
    private ListAcceptedResult _accepted;
    private MvxCommand _detailsCommand;        
    private ObservableCollection<MyCustomClass> _myList = new ObservableCollection<MyCustomClass>();

    public ListViewModel(IListService listService)
    {
        ListService = listService;

    }
    public ObservableCollection<MyCustomClass> MyList
    {
        get { return _myList; }
        set
        {
            _myList = value;
            RaisePropertyChanged(() => MyList);
        }
    }

    public ListAcceptedResult Accepted
    {
        get { return _accepted; }
        set
        {
            _accepted = value;
            RaisePropertyChanged(() => Accepted);
            Update();
        }
    }             

    public ICommand AcceptCommand
    {
        get
        {
            IsLoading = true;
            return
                new MvxCommand<MyCustomClass>(
                    item =>
                        //On Success assigning the returned value from service to Accepted Property,
                            error => { IsLoading = false; ReportError(error.Message); }));
        }
    }       



    public async System.Threading.Tasks.Task Update()
    {
        //update logic
    }
}

但我无法将 AcceptCommand 命令绑定到我的按钮。

我知道这不起作用，因为在我的自定义布局视图中，我没有收到 AcceptCommand 命令，因为它不是对象 MyCustomClass 的一部分

请帮我举个例子。

提前致谢

Answer 1

如您所知，数据绑定通过直接绑定到当前 ViewModel/Model 来工作。您无法访问父视图模型的属性或命令，除非您提供一个属性来访问父视图。

无论如何，一种选择是创建一个您在绑定中使用的值转换器。此转换器将返回一个MvxCommand 对象，该对象在执行时将使用MvxMessenger 发布消息。

父视图模型将订阅此消息，然后执行您想要的命令。

我根据 Stuart Lodge 的 N=02 示例创建了一个示例。

https://github.com/kiliman/MvxCommandToMessage

编辑：我修改了示例以使用通用 MessageToCommandValueConverter。您现在可以在绑定中传递消息类型。不过，您仍然需要特定的消息类型，因为 MvxMessenger.Publish() 对您的应用程序来说是全局的。有关更改，请参阅 GitHub 上的代码。

---

这是值转换器：

public class KittenAcceptedMessageValueConverter : MvxValueConverter<Kitten, ICommand>
{
    protected override ICommand Convert(Kitten kitten, Type targetType, object parameter, CultureInfo culture)
    {
        return new MvxCommand(() =>
        {
            var messenger = Mvx.Resolve<IMvxMessenger>();
            var message = new KittenAcceptedMessage(this, kitten);
            messenger.Publish(message);
        });
    }
}

这是您在布局中绑定到它的方式。使用. 将当前对象传递给转换器。

<Mvx.MvxImageView
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:layout_margin="10dp"
    local:MvxBind="ImageUrl ImageUrl; Click KittenAcceptedMessage(.)" />

最后在您的 ViewModel 中，您将订阅此消息，并调用您的命令：

_messenger.Subscribe<KittenAcceptedMessage>(message => 
{
     KittenAcceptedCommand.Execute(message.Kitten); 
});

private MvxCommand<Kitten> _kittenAcceptedCommand;
public ICommand KittenAcceptedCommand
{
    get
    {
        _kittenAcceptedCommand = _kittenAcceptedCommand ?? new MvxCommand<Kitten>(kitten =>
        {
            var toast = Mvx.Resolve<IToastPlugin>();
            toast.Show(string.Format("You accepted {0}", kitten.Name));
        });
        return _kittenAcceptedCommand;
    }
}

希望这会有所帮助。