刪除綁定到 ObservableCollection 的 DataGrid 中的選定行

Question

我正在 WPF 中編寫一個應用程序，嘗試使用 MVVM 設計模式（這對我來說是新的）。 我有一個綁定到ObservableCollection的DataGrid 。

我想要達到的目標：

使用“刪除”按鈕刪除當前選定的 DataGrid 行。 我已經嘗試了大量的論壇帖子和視頻來找到解決方案。 該解決方案可能已經多次盯着我的臉，但在這一點上，我比剛開始時更加困惑。

任何援助將不勝感激。

ViewModel（使用工作代碼更新，感謝 EldHasp）：

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Windows;
using GalaSoft.MvvmLight.CommandWpf;
using Ridel.Hub.Model;

namespace Ridel.Hub.ViewModel {

    public class LicenseHoldersViewModel : INotifyPropertyChanged {

        public ObservableCollection<LicenseHolders> licenseHolders { get; }
            = new ObservableCollection<LicenseHolders>();
        

        public LicenseHoldersViewModel() {

            FillDataGridLicenseHolders();
        }

        private void FillDataGridLicenseHolders() {

            try {

                using (SqlConnection sqlCon = new(ConnectionString.connectionString))
                using (SqlCommand sqlCmd = new("select * from tblLicenseHolder", sqlCon))
                using (SqlDataAdapter sqlDaAd = new(sqlCmd))
                using (DataSet ds = new()) {

                    sqlCon.Open();
                    sqlDaAd.Fill(ds, "tblLicenseHolder");

                    //if (licenseHolders == null)
                        //licenseHolders = new ObservableCollection<LicenseHolders>();

                    foreach (DataRow dr in ds.Tables[0].Rows) {

                        licenseHolders.Add(new LicenseHolders {

                            ID = Convert.ToInt32(dr[0].ToString()),
                            Foretaksnavn = dr[1].ToString(),
                            Foretaksnummer = dr[2].ToString(),
                            Adresse = dr[3].ToString(),
                            Postnummer = (int)dr[4],
                            Poststed = dr[5].ToString(),
                            BIC = dr[6].ToString(),
                            IBAN = dr[7].ToString(),
                            //Profilbilde ???
                            Kontaktperson = dr[8].ToString(),
                            Epost = dr[9].ToString(),
                            Tlf = dr[10].ToString()
                        });
                    }
                }

            } catch (Exception ex) {

                MessageBox.Show(ex.Message, "Message", MessageBoxButton.OK, MessageBoxImage.Information);
            }
        }

        private RelayCommand<LicenseHolders> _removeLicenseHoldersCommand;

        public RelayCommand<LicenseHolders> RemoveLicenseHoldersCommand => _removeLicenseHoldersCommand
            ?? (_removeLicenseHoldersCommand = new RelayCommand<LicenseHolders>(RemoveLicenseHolderExecute, RemoveLicenseHolderCanExecute));

        private bool RemoveLicenseHolderCanExecute(LicenseHolders myLicenseHolder) {

            // Checking for the removeable licenseholder in the collection
            return licenseHolders.Contains(myLicenseHolder);
        }

        private void RemoveLicenseHolderExecute(LicenseHolders myLicenseHolder) {

                licenseHolders.Remove(myLicenseHolder);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName) {

            if (PropertyChanged != null) {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Model：

public class LicenseHolders {

    public string example { get; set; }
    // more of the same...
}

XAML：

<Button Style="{DynamicResource ButtonWithRoundCornersGreen}" 
    FontSize="22" x:Name="btnDelete" Content="Delete" 
    Width="187" Height="47" Background="#48bb88" Foreground="White" 
    Canvas.Left="547" Canvas.Top="668" IsEnabled="False" Click="btnDelete_Click"/>

<DataGrid             
    x:Name="dgLicenseHolder"
    CanUserAddRows="False"
    ItemsSource="{Binding licenseHolders}"
    Height="557" 
    Width="505" 
    ColumnWidth="*"
    Canvas.Top="158" 
    FontSize="20"
    IsReadOnly="True"
    SelectionMode="Single"
    AutoGenerateColumns="False"
    CanUserDeleteRows="False"
    SelectionChanged="dgLicenseHolder_SelectionChanged" Canvas.Left="31" >

    <DataGrid.Columns>
        <DataGridTextColumn Header="Example" Binding="{Binding Path='Example'}" IsReadOnly="True" Visibility="Collapsed"/>
        // more of the same..
    </DataGrid.Columns>            
</DataGrid>

代碼隱藏：

public partial class Personell : Window {

    LicenseHoldersViewModel licenseHoldersViewModel;

    public Personell() {

        InitializeComponent();

        licenseHoldersViewModel = new LicenseHoldersViewModel();
        base.DataContext = licenseHoldersViewModel;
    }
}

Answer 1

由於您使用的是 MVVM，因此不應使用按鈕事件 Click 處理程序來操作 ViewModel 數據。
為此，您必須在 ViewModel 中創建一個命令屬性並將其綁定到按鈕。
命令參數綁定到 SelectedItem（如果選擇了 Single 模式並且只刪除了一個選定的行），或者綁定到 SelectedItems（如果選擇了 Extended 模式並且刪除了多行）。

我不知道您使用的是 INotifyPropertyChanged 和 ICommand 的哪些實現。
因此，我正在編寫一個基於我自己實現的 BaseInpc 和 RelayCommand 類的示例。

    public class LicensesViewModel : BaseInpc
    {
        // A collection-property of the ObservableCollection type is best done «ReadOnly».
        public ObservableCollection<LicenseHolders> LicensesHolders { get; }
            = new ObservableCollection<LicenseHolders>();
        public void FillDataGrid()
        {

            //---------------
            //---------------
            //---------------

                //if (licenseHolders == null)
                //    licenseHolders = new ObservableCollection<LicenseHolders>();

                foreach (DataRow dr in ds.Tables[0].Rows)
                {

                    LicensesHolders.Add(new LicenseHolders
                    {

                        example = dr[0].ToString(),
                        // more of the same...

                    });
                }
            }
        }


        private RelayCommand _removeLicenseCommand;
        public RelayCommand RemoveLicenseCommand => _removeLicenseCommand
            ?? (_removeLicenseCommand = new RelayCommand<LicenseHolders>(RemoveLicenseExecute, RemoveLicenseCanExecute));

        private bool RemoveLicenseCanExecute(LicenseHolders license)
        {
            // Checking for the Removable License in the Collection
            return LicensesHolders.Contains(license);
        }

        private void RemoveLicenseExecute(LicenseHolders license)
        {
            // If necessary, the code for removing the license from the database is placed at the beginning of the method.
            // For example, calling some method for this, returning true if the deletion is successful.
            var result = RemoveFromBD(license);

            //It is then removed from the collection.
            if (result)
                LicensesHolders.Remove(license);
        }

        private bool RemoveFromBD(LicenseHolders license)
        {
            throw new NotImplementedException();
        }
    }

<Button Style="{DynamicResource ButtonWithRoundCornersGreen}" 
    FontSize="22" x:Name="btnDelete" Content="Delete" 
    Width="187" Height="47" Background="#48bb88" Foreground="White" 
    Canvas.Left="547" Canvas.Top="668" IsEnabled="False"
    Command="{Binding RemoveLicenseCommand}"
    CommandParameter="{Binding SelectedItem, ElementName=dgLicenseHolder}"/>

多選模式的實現選項：

        private RelayCommand _removeLicensesCommand;
        public RelayCommand RemoveLicensesCommand => _removeLicensesCommand
            ?? (_removeLicensesCommand = new RelayCommand<IList>(RemoveLicensesExecute, RemoveLicensesCanExecute));

        private bool RemoveLicensesCanExecute(IList licenses)
        {
            // Checking for the Removable License in the Collection
            return licenses.OfType<LicenseHolders>().Any(license => LicensesHolders.Contains(license));
        }

        private void RemoveLicensesExecute(IList licenses)
        {
            foreach (var license in licenses.OfType<LicenseHolders>().ToArray())
            {
                var result = RemoveFromBD(license);

                if (result)
                    LicensesHolders.Remove(license);
            }
        }

<Button Style="{DynamicResource ButtonWithRoundCornersGreen}" 
    FontSize="22" x:Name="btnDelete" Content="Delete" 
    Width="187" Height="47" Background="#48bb88" Foreground="White" 
    Canvas.Left="547" Canvas.Top="668" IsEnabled="False"
    Command="{Binding RemoveLicensesCommand}"
    CommandParameter="{Binding SelectedItems, ElementName=dgLicenseHolder}"/>

更新！ （嘗試實施“EldHasp”錯誤消息的解決方案時

該錯誤是由於使用了 MVVMLight。
您最初並未表明您正在使用此 package。
其中， RelayCommand不是RelayCommand<T>的基礎。
因此，屬性和變量的類型必須與使用的構造函數的類型相匹配。

這就是 MVVMLight 需要它的方式：

    private RelayCommand<LicenseHolders> _removeLicenseHoldersCommand;

    public RelayCommand<LicenseHolders> RemoveLicenseHolderCommand => _removeLicenseHoldersCommand
        ?? (_removeLicenseHoldersCommand = new RelayCommand<LicenseHolders>(RemoveLicenseHolderExecute, RemoveLicenseHolderCanExecute);

有關分配 DataContext 的其他建議。

XAML Designer 在設計時不處理在代碼隱藏中分配它。 因此，在開發過程中，您看不到數據傳輸到 UI 元素時的外觀。
這是非常不方便的。
要解決這個問題，您需要設置 Development Time DataContext。
但在簡單的情況下，只需要在 XAML 中設置 DataContext 即可。

清除代碼背后：

public partial class Personell : Window 
{
    public Personell() => InitializeComponent();
}

添加到 XAML：

<Window.DataContext>
  <local:LicenseHoldersViewModel/>
</Window.DataContext>

Answer 2

您可以使用棱鏡。 Intall package Prism.Core then Install-Package Microsoft.Xaml.Behaviors.Wpf -Version 1.1.31 packages in your project, in your xaml declare namespace as - xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

<Button Content="Button">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <i:InvokeCommandAction Command="{Binding MyCommand }" 
                            CommandParameter="{Binding PassRow/IDHere}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>

在您的視圖模型中 -

public class ViewModel
{
    public ICommand MyCommand { get; set; }

    public ViewModel()
    {
        MyCommand = new DelegateCommand<object>(OnRowDeleted);
    }

    public void OnRowDeleted(object o)
    {
        // remove the value from your observablecollection here using LINQ
    }
}