title: Silverlight MVVM Light Listbox item Click Event
body: <p>I'm using the MVVM Light Toolkit with Silverlight. </p>
  
  <p>On my UserControl I have a ListBox that displays a list of files. Each file has a delete image next to the file name. In the DataTemplate for the listbox I have an image (or can use a button) and a TextBlock. </p>
  
  <p>So I want to capture using the event when the user will clicks on the image(or button with image) to remove the file from the list of files.</p>
  
  <p>But I cannot seem to capture the event. Maybe this is due to having the SelectedItem Event on the listbox?</p>
  
  <pre class="lang-cs prettyprint-override"><code>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&lt;UploadFile&gt; _uploadFiles = new ObservableCollection&lt;UploadFile&gt;();
      public ObservableCollection&lt;UploadFile&gt; 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 --&gt; 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&lt;DragEventArgs&gt;(e =&gt; OnDropFileCommand(e));
          RemoveCommand = new RelayCommand(OnRemoveFileCommand);
          UploadCommand = new RelayCommand(OnClickUploadCommand);
      }
      #endregion
  }
  </code></pre>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;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"&gt;
      &lt;i:Interaction.Triggers&gt;
          &lt;i:EventTrigger EventName="Drop"&gt;
              &lt;cmd:EventToCommand Command="{Binding DragDropFileCommand}" PassEventArgsToCommand="True"/&gt;
          &lt;/i:EventTrigger&gt;
      &lt;/i:Interaction.Triggers&gt;
      &lt;ListBox.Background&gt;
          &lt;ImageBrush ImageSource="/FileUploadApplication;component/Resources/dragdrophere.png" Stretch="None" /&gt;
      &lt;/ListBox.Background&gt;
      &lt;ListBox.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;StackPanel Orientation="Horizontal"&gt;
                  &lt;Button Command="{Binding RemoveCommand}"&gt;                                   
                                  &lt;Image Source="/FileUploadApplication;component/Resources/delete.png"/&gt;
                              &lt;/Button&gt;
                              &lt;Image Source="/FileUploadApplication;component/Resources/delete.png"&gt;
                                  &lt;i:Interaction.Triggers&gt;
                                      &lt;i:EventTrigger EventName="Click"&gt;
                                          &lt;cmd:EventToCommand Command="{Binding RemoveCommand}"/&gt;
                                      &lt;/i:EventTrigger&gt;
                                  &lt;/i:Interaction.Triggers&gt;
                              &lt;/Image&gt; &lt;TextBlock Text=" " /&gt;
                  &lt;TextBlock Text="{Binding Name}" /&gt;
              &lt;/StackPanel&gt;
          &lt;/DataTemplate&gt;
      &lt;/ListBox.ItemTemplate&gt;
  &lt;/ListBox&gt;
  </code></pre>