Deleting a ListBoxItem from a button on it's data template on WPF and C#

I've been writing an application on WPF. It has a ListBox bound to a ObservableCollection<> of a custom class. The data is displayed using a dataTemplate 开发者_如何学运维which has a DELETE button that is supposed to remove the item of the ObservableCollection<>.

The data source collection is defined as shown:

public class SellItem : INotifyPropertyChanged
{
    private string _name, _code, _details;
    
    public SellItem Self
    {
        get { return this; }
    }

    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Name"));
        }
    }
    public string Code
    {
        get
        {
            return _code;
        }
        set
        {
            _code = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Code"));
        }
    }
    public string Details
    {
        get
        {
            return _details;
        }
        set
        {
            _details = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Details"));
        }
    }
    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

public class ItemCollection : ObservableCollection<SellItem>
{
    static public ItemCollection theCollection = null;

    public ItemCollection()
    {
        theCollection = this;

    }
}

The xaml code looks like this:

<Window x:Class="NALT_WPF.SaleWindow"
    ...
    xmlns:local="clr-namespace:NALT_WPF"
    Title="Test" Height="494" Width="838">
<Window.Resources>
    <ObjectDataProvider x:Key="theItemCollection" ObjectType="{x:Type local:ItemCollection}"/>
</Window.Resources>
<Window.CommandBindings>
    <!--Using command binding-->
    <CommandBinding Command="Delete" Executed="CommandBinding_Executed_RemoveAll" />
</Window.CommandBindings>
<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="ProductListItemTemplate">
            <Grid>
                ...
                        <!-- This is the button on data template to remove the item from 'ItemCollection' -->
                        <Button Name="btRemoveAllItems" Content="X" 
                                Command="Delete" CommandParameter="{Binding Self}">
                        </Button>
                ...
            </Grid>
        </DataTemplate>
    </Grid.Resources>
    ...
    <ListBox Grid.Row="1" Margin="10" Name="lstProducts" 
                         ItemTemplate="{StaticResource ResourceKey=ProductListItemTemplate}"
                         ItemsSource="{Binding Source={StaticResource theItemCollection}}"
                         HorizontalContentAlignment="Stretch">
    </ListBox>
</Grid>

And on the main window C# code:

public partial class MainWindow : Window
{
    public SaleWindow()
    {
        InitializeComponent();
    }

    ...

    private void CommandBinding_Executed_RemoveAll(object sender, ExecutedRoutedEventArgs e)
    {
        // this is the code executed when DELETE button on data template is pressed.
        // I was thinking to remove the item here

        MessageBox.Show("Removing, proceed? ...");
         
        //...  ... 

        //...
        
    }
}

How can I do that? To remove the item from the collection on the listBox of which the button on the template belongs to. The item is not always the selected one.

Something like this:

private void CommandBinding_Executed_RemoveAll(object sender, ExecutedRoutedEventArgs e) 
{
    SellItem sellItem = (SellItem) e.Parameter;
    var itemsCollection = (ItemCollection)lstProducts.ItemsSource;
    itemsCollection.Remove(sellItem);
}

Although, it doesn't seem right. You should consider rewriting this code in a MVVM style. This way you will have a view model that will own the list of products and that view model will define a Delete command that will delete the item from the collection.

And one more tip. You don't need to define a Self property to be able to bind to it. You can use the binding extension without any parameters:

<Button Name="btRemoveAllItems" Content="X" 
        Command="Delete" CommandParameter="{Binding}">