MvvmCross Xamarin Forms ListView模板内Button Command绑定问题

XAML代码调整 #

你需要先给ListView添加唯一名称，再通过引用父级控件的方式拿到外层ViewModel的命令，同时把当前项作为参数传入，修改后代码如下：

<ListView
        x:Name="ModelsListView"
        ItemsSource="{Binding Models}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Button 
                    Command="{Binding BindingContext.Delete, Source={x:Reference ModelsListView}}"
                    CommandParameter="{Binding .}"
                    Text="删除"/>
                <Button 
                    Command="{Binding BindingContext.Details, Source={x:Reference ModelsListView}}"
                    CommandParameter="{Binding .}"
                    Text="详情"/>
            </StackLayout>
          
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ViewModel代码调整 #

你原来的命令泛型参数是ListItem，和实际传入的Model类型不匹配，需要修改为对应Model类型：

class ModelsViewModel : MvxViewModel
{
    private ObservableCollection<Model> models;
    public ObservableCollection<Model> Models
    {
        get
        {
            return models;
        }
        set
        {
            SetProperty(ref models, value);
        }
    }

    private IMvxCommand details;
    public IMvxCommand Details
    {
        get
        {
            details = details ?? new MvxCommand<Model>(selectedModel =>
            {
                // selectedModel即为被点击的列表项对应Model对象
            });
            return details;
        }
    }

    private IMvxCommand delete;
    public IMvxCommand Delete
    {
        get
        {
            delete = delete ?? new MvxCommand<Model>(selectedModel =>
            {
                // selectedModel即为被点击的列表项对应Model对象，可直接执行移除逻辑
                Models.Remove(selectedModel);
            });
            return delete;
        }
    }
}

原理解释 #

• ListView的ItemTemplate内默认绑定上下文是对应项的Model对象，通过x:Reference引用ListView实例后，拿到的BindingContext就是外层的ModelsViewModel，即可访问到你定义的Delete、Details命令
• CommandParameter="{Binding .}"表示把当前绑定上下文（也就是当前项的Model对象）作为参数传入命令

内容的提问来源于stack exchange，提问作者Kamil Brucki