Question

我正在使用Silverlight的MVVM Light Toolkit。

在我的UserControl上，我有一个显示文件列表的ListBox。每个文件在文件名旁边都有一个删除图像。在列表框的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

你能否从这个问题的答案中使用这样的东西 MVVM-Light, firing events from a button inside a data grid column template

<Command:EventToCommand Command="{Binding Source={StaticResource Locator}, Path=MainViewModel.RemoveCommand}"/>

Answer 2

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

Answer 3

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

Silverlight MVVM Light列表框项目单击“事件”

3 个答案: