Silverlight MVVM Light列表框项目点击事件

Question

我正在将 MVVM Light Toolkit 与 Silverlight 结合使用。

在我的用户控件上，我有一个显示文件列表的列表框。每个文件的文件名旁边都有一个删除图像。在列表框的 DataTemplate 中，我有一个图像（或可以使用按钮）和一个 TextBlock。

因此，我想在用户单击图像（或带有图像的按钮）以从文件列表中删除文件时捕获该事件。

但我似乎无法捕捉到这一事件。也许这是因为列表框中有 SelectedItem 事件？

public class MainViewModel : ViewModelBase
{
    #region Properties

    public const string SelectedListBoxFilePropertyName = "SelectedUploadFile";
    private UploadFile _selectedUploadFile = null;
    public UploadFile SelectedUploadFile 
    { 
        get 
        { 
            return _selectedUploadFile;
        } 
        set
        {
            if (_selectedUploadFile == value)
                return;

            _selectedUploadFile = value;

            RaisePropertyChanged(SelectedListBoxFilePropertyName);
        }
    }

    public const string UploadFilesPropertyName = "UploadFiles";
    private ObservableCollection<UploadFile> _uploadFiles = new ObservableCollection<UploadFile>();
    public ObservableCollection<UploadFile> UploadFiles
    {
        get
        {
            return _uploadFiles;
        }
        set
        {
            if (_uploadFiles == value)
                return;

            _uploadFiles = value;

            RaisePropertyChanged(UploadFilesPropertyName);
        }
    }
    #endregion

    public static ICommand BrowseCommand { get; private set; }
    public static ICommand DragDropFileCommand { get; private set; }
    public static ICommand RemoveCommand { get; private set; }

    #region Constructor
    public MainViewModel()
    {            
        if (IsInDesignMode)
        {
            // Code runs in Blend --> create design time data.
            UploadFiles = new UploadFileContainer().UploadFiles;
        }
        else
        {
            // Code runs "for real"
        }

        WireUpCommands();
    }
    #endregion

    #region Event Handlers
    private void OnBrowseFileCommand()
    {
        var dialog = new OpenFileDialog();
        dialog.ShowDialog();

        if (dialog.Files != null)
            AddFiles(dialog.Files);
    }

    private void OnDropFileCommand(DragEventArgs e)
    {
        var files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

        AddFiles(files);
    }

    private void OnRemoveFileCommand()
    {
        UploadFiles.Remove(_selectedUploadFile);
    }
    #endregion

    #region Private Methods

    private void WireUpCommands()
    {
        BrowseCommand = new RelayCommand(OnBrowseFileCommand);
        DragDropFileCommand = new RelayCommand<DragEventArgs>(e => OnDropFileCommand(e));
        RemoveCommand = new RelayCommand(OnRemoveFileCommand);
        UploadCommand = new RelayCommand(OnClickUploadCommand);
    }
    #endregion
}

<ListBox Grid.Row="1" Height="214" HorizontalAlignment="Left" AllowDrop="True" Margin="6,26,0,0" Name="UploadFilesListBox" VerticalAlignment="Top" Width="415" ItemsSource="{Binding Path=UploadFiles}" SelectedItem="{Binding Path=SelectedListBoxFile, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Auto">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Drop">
            <cmd:EventToCommand Command="{Binding DragDropFileCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <ListBox.Background>
        <ImageBrush ImageSource="/FileUploadApplication;component/Resources/dragdrophere.png" Stretch="None" />
    </ListBox.Background>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Button Command="{Binding RemoveCommand}">                                   
                                <Image Source="/FileUploadApplication;component/Resources/delete.png"/>
                            </Button>
                            <Image Source="/FileUploadApplication;component/Resources/delete.png">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Click">
                                        <cmd:EventToCommand Command="{Binding RemoveCommand}"/>
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Image> <TextBlock Text=" " />
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 1

由于您的 ItemsSource 是 UploadFiles，因此它可能会将事件发送到 UploadFile，而不是用户控件绑定到的视图模型。

Answer 2

您的按钮是 ItemTemplate 的元素。您将列表框 ItemsSource 绑定到 ObservableCollection。每个Itemtemplate DataContext都不是MainViewModel，而是UploadFile，它没有RemoveCommand。
我通过使用构造函数向每个项目添加父对象来解决这个问题。 RemoveCommand 位于项目的 ViewModel 内部，并且在删除函数中我调用父级的方法来删除项目。
不确定这是否是最好的解决方案，但它对我有用。