Get the row details when a control in data template is selected

Question

Im building a WPF application and trying to stick to the MVVM pattern as much as possible. I have a list box with a data template inside of it that contains a TextBlock and Button. If the button within the data template is clicked it does not select the entire row, so I am unaware of what row it pertains to. I would like to grab the entire object and bind it to a property in the view model. Can I get some help or a workaround for this please that sticks to mvvm pattern.

List box with item template

<telerik:RadListBox Width="200" Height="150" HorizontalAlignment="Left" Margin="10" ItemsSource="{Binding ListOfSupplierInvoices}"  
                    SelectedItem="{Binding SelectedSupplierInvoice, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
   <telerik:RadListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
            <TextBlock Text="{Binding InvoiceNumber}" HorizontalAlignment="Left" Margin="5" ></TextBlock>
            <telerik:RadButton  Height="20"  >
               <telerik:RadButton.Content>
                  <Image Source="/ImageResources/Misc/delete.png" Stretch="Fill" />
               </telerik:RadButton.Content>
            </telerik:RadButton>
         </StackPanel>
      </DataTemplate>
   </telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>

How it looks in the view:

Answer 1

As far as I understand your code, the button corresponds to a delete command, which means you want to delete the item associated with the button. In this case, the selection might not need to change, you just have to pass the current item to the delete command.

Add a Delete command to your view model like this:

public class MyViewModel : ViewModelBase
{
   public MyViewModel()
   {
      Delete = new DelegateCommand(ExecuteDelete, CanExecuteDelete);

      // ...other code.
   }

   public ICommand Delete { get; }

   private void ExecuteDelete(object obj)
   {
      var invoiceItem = (InvoiceItem) obj;

      // Use this only if you need the item to be selected.
      // SelectedSupplierInvoice = invoiceItem;

      // ...your delete logic.
   }

   private bool CanExecuteDelete(object obj)
   {
      // ...your can execute delete logic.
   }

   // ...other code.
}

Note that I introduced InvoiceItem as item type, because I do not know your item type, simply adapt it. The Delete command gets the current item passed as parameter. If you can always remove the item, there is no need in selecting it, as it is gone afterwards.

Otherwise, uncomment the line so the SelectedSupplierInvoice is set to the item which will automatically update the user interface through the two-way binding if you have implemented INotifyPropertyChanged correctly or derive from ViewModelBase which exposes the RaisePropertyChanged or OnPropertyChanged method, e.g.:

private InvoiceItem _selectedSupplierInvoice;
public InvoiceItem SelectedSupplierInvoice
{
   get => _selectedSupplierInvoice;
   set
   {
      if (_selectedSupplierInvoice == value)
         return;

      _selectedSupplierInvoice = value;
      RaisePropertyChanged();
   }
}

In your XAML wire the button to the Delete command on the DataContext of the RadListBox.

<telerik:RadButton  Height="20"
                    Command="{Binding DataContext.Delete, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadListBox}}}"
                    CommandParameter="{Binding}">
   <telerik:RadButton.Content>
      <Image Source="/ImageResources/Misc/delete.png" Stretch="Fill" />
   </telerik:RadButton.Content>
</telerik:RadButton>