WPF技术问题：点击按钮时如何获取列表中的当前Article对象

点击红色“X”按钮时，希望从ObservableCollection中删除对应的Article对象，但不知道如何获取当前的Article对象。已定义Article类，并有存储不同Article对象的列表。

<ItemsControl ItemsSource="{Binding CartArticles}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="30,30,30,30" Margin="0,15,0,30" MinWidth="100" MaxWidth="600" >
                <Grid Margin="0,0,0,10" Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Image Width="100" Height="70" Source="{Binding PathPic}" Margin="0,10,0,0"/>
                    <TextBlock FontWeight="Bold" Grid.Column="1" FontSize="17" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Name}"/>
                    <StackPanel Grid.Column="2" HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Center" >
                        <TextBlock FontWeight="Bold" FontSize="17" Foreground="DimGray" Text="{Binding Quantity}"/>
                        <TextBlock Text=" x " FontSize="16" Foreground="DimGray" />
                        <TextBlock FontWeight="Bold" FontSize="17" Foreground="DimGray" Text="{Binding Price}" />
                        <TextBlock FontWeight="Bold" FontSize="17" Foreground="DimGray" Text=" Euro" />
                    </StackPanel>
                    <StackPanel Grid.Column="2" HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Bottom" >
                        <TextBlock FontWeight="Bold" Grid.Column="2" FontSize="17" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding CompleteArticlePrice}"/>
                        <TextBlock FontWeight="Bold" FontSize="17" Foreground="DimGray" Text=" Euro" />
                    </StackPanel>
                    <Button Name="DeleteCartArticle" Grid.Column="2" Width="20" Height="20" Margin="0,13,20,0" Content="X" FontSize="15" Foreground="Red" Background="Transparent" BorderThickness="0" HorizontalAlignment="Right" VerticalAlignment="Center" Click="DeleteCartArticle_Click"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

public ObservableCollection<Article> CartArticles { get; set; } = new ObservableCollection<Article>();

public void GetCartArticles()
{
    foreach (var article in _shoppingCartService.CartArticles.ToList())
    {
        CartArticles.Add(new Article
        {
            ArticleId = article.ArticleId,
            Name = article.Name,
            Price = article.Price,
            Quantity = article.Quantity,
            PathPic = article.PathPic,
            CompleteArticlePrice = article.Price * article.Quantity,
        });
    }
}

方法1：通过Click事件直接获取DataContext #

在后台代码的DeleteCartArticle_Click方法中，将按钮的DataContext转换为Article对象，再从集合中移除：

private void DeleteCartArticle_Click(object sender, RoutedEventArgs e)
{
    if (sender is Button button && button.DataContext is Article articleToDelete)
    {
        CartArticles.Remove(articleToDelete);
        // 如需同步到_shoppingCartService的集合，可在此添加对应逻辑
        _shoppingCartService.CartArticles.Remove(articleToDelete);
    }
}

方法2：使用MVVM命令绑定（推荐） #

若遵循MVVM模式，建议给按钮绑定ICommand，将当前Article作为命令参数传递：

1. 在ViewModel中定义删除命令 #

public ICommand DeleteArticleCommand { get; }

// 在ViewModel构造函数中初始化命令
public YourViewModel()
{
    DeleteArticleCommand = new RelayCommand<Article>(DeleteArticle);
}

private void DeleteArticle(Article articleToDelete)
{
    if (articleToDelete != null)
    {
        CartArticles.Remove(articleToDelete);
        _shoppingCartService.CartArticles.Remove(articleToDelete);
    }
}

注：RelayCommand是常用的ICommand实现，可自行编写或使用Prism/MvvmLight等框架提供的版本

2. 修改XAML中的Button绑定 #

替换原有的Click事件为命令绑定：

<Button Name="DeleteCartArticle" Grid.Column="2" Width="20" Height="20" Margin="0,13,20,0"
        Content="X" FontSize="15" Foreground="Red" Background="Transparent" BorderThickness="0"
        HorizontalAlignment="Right" VerticalAlignment="Center"
        Command="{Binding DataContext.DeleteArticleCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
        CommandParameter="{Binding}" />

通过RelativeSource找到父级ItemsControl的DataContext（即ViewModel），并将当前Article作为命令参数传递。

内容的提问来源于stack exchange，提问作者user22498067