Элемент списка Silverlight MVVM Light щелкните Событие - PullRequest
Новая
       9

Элемент списка Silverlight MVVM Light щелкните Событие

2 голосов
/ 27 марта 2011

Я использую MVVM Light Toolkit с Silverlight.

В моем 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>

Ответы [ 3 ]

3 голосов
/ 29 марта 2011

Не могли бы вы использовать что-то подобное, взятое из ответа на этот вопрос MVVM-Light, запуск событий от кнопки внутри шаблона столбца сетки данных 

<Command:EventToCommand Command="{Binding Source={StaticResource Locator}, Path=MainViewModel.RemoveCommand}"/>
0 голосов
/ 17 августа 2011

Ваша кнопка является элементом ItemTemplate.вы связываете список ItemsSource с ObservableCollection.Каждый Itemtemplate DataContext - это не MainViewModel, а UploadFile, в котором нет RemoveCommand.Я решил эту проблему, добавив к каждому элементу родительский объект с помощью конструктора.RemoveCommand находился внутри ViewModel элемента и вставлял функцию удаления, которую вызывал метод родителя для удаления элемента.Не уверен, что это лучшее решение, но оно сработало для меня.

0 голосов
/ 27 марта 2011

Поскольку ваш ItemsSource - UploadFiles, он, вероятно, отправляет событие в UploadFile, а не модель представления, к которой привязан пользовательский элемент управления.

...