从 Silverlight ItemsControl 删除项目的模式

Question

我有一个包含 ItemsControl 的 Silverlight 页面。它看起来像这样

-- Name             Description          [Add]
-- Thing1           The first thing      [Edit] [Delete]
-- Thing2           The second thing     [Edit] [Delete]

，其中 [Edit]、[Delete] 和 [Add] 是按钮。

目前，我正在将控件绑定到 Thing 集合，并使用模板来显示属性，并绑定到 ViewModel 中的 Edit 命令。

对于 ThingViewModel 来说，拥有导致其删除自身的 Delete 命令是没有意义的（对我来说）；

• 看起来不干净
• 该物体不知道它在集合中，因此无法将其自身从集合中删除

那么连接[Delete]按钮的最佳模式是什么？

Answer 1

“删除”代码不会在集合中单个项目的 ViewModel 上运行，而是会（以某种方式）冒泡到包含集合的 ViewModel，并在那里进行处理。

伪代码：

public class ItemContainerViewModel
{
    List<ItemClass> Items { get; set; }

    public void DeleteItem(ItemClass item)
    {
        this.Items.Remove(item);
        NotifyOfPropertyChange(() => this.Items); // Causes controls bound to this list to refresh their contents
    }
}

冒泡事件的一种方法是让 ItemViewModel 知道它的父 ViewModel

public class ItemViewModel
{
    public ItemsCollectionViewModel ParentViewModel { get; private set; }
    public ItemViewModel(ItemsCollectionViewModel parentViewModel)
    {
        this.ParentView = parentViewModel;
    }

    public void Delete()
    {
        this.ParentViewModel.Delete(this);
    }
}

使用 MVVM 框架（如 Caliburn.Micro 或 MVVM-Lite）有更好的方法，但这至少让您开始了解如何考虑这些类型ViewModel 中的操作。

本质上 - 您的 ViewModel 应该能够执行所有用户操作，而不需要任何类型的视图。 （您应该能够运行一些测试代码，并且让您的虚拟机按预期工作，而无需绑定视图）

Answer 2

这是我想出的——以一种非常简化的形式。当 RelativeSource 不可用时，这是一个显而易见的选择。

• 命名一个绑定到父/集合的控件
• 在子/项目的绑定上指定 ElementName 属性

这适用于 ItemsControl 但我无法获得此模式还适用于 DataGrid。

<ItemsControl Name="MyParentControl"
              ItemsSource="{Binding Things}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="Delete" 
                    Command="{Binding ElementName=MyParentControl, 
                        Path=DataContext.DeleteCommand}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 3

如果您使用列表框，以便用户可以选择一行，然后将命令放入包含该集合的虚拟机中，您将获得更清晰的实现。

这是带有删除按钮的行的 xaml。诀窍是使用“RelativeSource”

    <ListBox ItemsSource="{Binding MyItems, UpdateSourceTrigger=PropertyChanged}" SelectedItem="{Binding MySelectedItem, UpdateSourceTrigger=PropertyChanged}" >
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <StackPanel Orientation="Horizontal"   >
                                <Label Content="{Binding}" />
                                <Button Content="Delete" Command="{Binding DataContext.MyDeleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" />
                            </StackPanel >
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

和ViewModel代码

public DelegateCommand<object> MyDeleteCommand { get; set; }

protected void DoDelete(object o)
{
    MyItems.Remove(MySelectedItem);
}

protected bool CanDoDelete(object o)
{
    return MySelectedItem != null;
}

string _mySelectedItem;
public string MySelectedItem
{
    get { return _mySelectedItem; }
    set
    {
        _mySelectedItem = value;
        OnPropertyChanged("MySelectedItem");
        MyDeleteCommand.RaiseCanExecuteChanged();
    }
}

ObservableCollection<string> _myItems;
public ObservableCollection<string> MyItems
{
    get { return _myItems; }
    set 
    { 
        _myItems = value;
        OnPropertyChanged("MyItems");
    }
}

将按钮绑定到父项DeleteCommand ，哦，我刚刚看到上面关于silverlight和relativeSource的评论。我用 WPF 做了这个并测试了它，它有效，它可能不适用于 silverlight