MVVMCross - ListItem 内的按钮答案

【问题标题】：MVVMCross - Button inside ListItemMVVMCross - ListItem 内的按钮
【发布时间】：2013-12-01 10:29:30
【问题描述】：

我创建了一个包含名为 User 的模型类的列表。列表项包含一个按钮，我想在包含列表的视图模型上触发一个命令，而不是按钮。是否可以将 ItemsSource 设置为 ObservableCollection，但将 List 的 DataContext 设置为包含 ObservableCollection 的 ViewModel。

我有一个包含 ObservaleCollection 的 ViewModel：

FindFriendsViewModel：

    private ObservableCollection<User> _SearchResult = new ObservableCollection<User>();

    public ObservableCollection<User> SearchResult
    {
        get
        {
            return _SearchResult;
        }
        set
        {
            _SearchResult = value;
        }
    }

还有一个显示列表的视图 FindFriendsView：

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/LoginActivity_LoginFormContainer"
                android:layout_marginTop="10dip">
                <MvxListView
                    android:id="@+id/FindFriendsView_SearchResult"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="vertical"
                    android:fastScrollEnabled="true"
                    android:background="@color/transparent"
                    android:cacheColorHint="@color/transparent"
                    local:MvxItemTemplate="@layout/listitem_user"
                    local:MvxBind="ItemsSource SearchResult" />
            </LinearLayout>

列表项：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/imageview"
    android:layout_marginLeft="10dp"
    android:orientation="vertical"
    android:layout_centerVertical="true">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textSize="18dp"
            local:MvxBind="Text FirstName"
            android:layout_gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:singleLine="true"
            android:textSize="18dp"
            local:MvxBind="Text LastName"
            android:layout_gravity="center" />
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textSize="16dp"
        android:textColor="@color/darkgrey"
        local:MvxBind="Text Email" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:padding="5dp">
    <Button
        android:id="@+id/ListItemUser_BtnFollow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/GreyButton"
        android:drawableLeft="@drawable/ic_action_user_red"
        android:textColor="@color/black"
        android:textSize="13dp"
        android:text="@string/listitem_user_follow"
        local:MvxBind="Click FollowCommand; Visibility IsFriend, Converter=Visibility"/>
    <Button
        android:id="@+id/ListItemUser_BtnFollowing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/RedButton"
        android:drawableLeft="@drawable/ic_action_tick"
        android:textSize="13dp"
        android:clickable="false"
        android:text="@string/listitem_user_following"
        local:MvxBind="Visibility IsFriend, Converter=InvertedVisibility"/>
</LinearLayout>

ListItem 包含两个按钮，其中一次只有一个可见，并且其中只有一个包含单击命令。我希望能够让按钮触发 FindFriendsViewModel 上的命令，而不是模型类用户。

【问题讨论】：

对不起 - 但我不明白你的问题。如果您包含更多细节可能会有所帮助 - 例如您的 ViewModel、ObservableCollection 和 UI 的一些示例代码

标签： mvvmcross

【解决方案1】：

您可以利用弱引用（或在 MvvmCross 中实现的 WeakSubscribe）来实现您想要的功能。在您的视图模型中，您可以订阅绑定到列表的模型的 INotifyPropertyChanged。一旦您收到按钮触发 ICommand 的通知，您的 ViewModel 就可以做出相应的响应。

这是一个小例子

using Cirrious.CrossCore.WeakSubscription;

foreach (var sale in Sales)
{                
    var token = sale.WeakSubscribe(sale_PropertyChanged);
}

void sale_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "Accepted")
    {
        CalculateSalesTotals();
    }
}

【讨论】：

但是这个解决方案不需要包含 ICommand 的模型类吗？
是的，它需要一个包含 ICommand 的模型。您最好为用户创建一个视图模型。

【解决方案2】：

最好尝试使用swipelistview。我会这样做，希望可以包装这个库。目前我用长按上下文菜单解决了我的问题（listitem内的按钮）。

【讨论】：

【解决方案3】：

每当您需要从列表项中触发命令时，您都需要在您的列表项类周围使用视图模型包装器。包装器将执行命令，然后 axml 将绑定到包装器中的命令。如果您希望命令在列表视图模型中执行，那么您可以将一个操作传递给包装器，并在视图模型中执行该操作。

【讨论】：